@fluentui/react-drawer 9.2.2 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/react-drawer
2
2
 
3
- This log was last generated on Thu, 09 May 2024 19:31:57 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 16 May 2024 09:21:21 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.3.1)
8
+
9
+ Thu, 16 May 2024 09:21:21 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.3.0..@fluentui/react-drawer_v9.3.1)
11
+
12
+ ### Patches
13
+
14
+ - fix: restore scroll when Drawer closes ([PR #31367](https://github.com/microsoft/fluentui/pull/31367) by marcosvmmoura@gmail.com)
15
+ - Bump @fluentui/react-dialog to v9.10.5 ([commit](https://github.com/microsoft/fluentui/commit/3ae9ed772fbcedeff1a76e154f6eb7d515785698) by beachball)
16
+
17
+ ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.3.0)
18
+
19
+ Mon, 13 May 2024 12:34:19 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.2.2..@fluentui/react-drawer_v9.3.0)
21
+
22
+ ### Minor changes
23
+
24
+ - feat: Add missing Drawer context exports. ([PR #31328](https://github.com/microsoft/fluentui/pull/31328) by estebanmu@microsoft.com)
25
+
7
26
  ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.2.2)
8
27
 
9
- Thu, 09 May 2024 19:31:57 GMT
28
+ Thu, 09 May 2024 19:35:12 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.2.1..@fluentui/react-drawer_v9.2.2)
11
30
 
12
31
  ### Patches
package/dist/index.d.ts CHANGED
@@ -68,7 +68,7 @@ export declare type DrawerBodySlots = {
68
68
  */
69
69
  export declare type DrawerBodyState = ComponentState<DrawerBodySlots>;
70
70
 
71
- declare type DrawerContextValue = {
71
+ export declare type DrawerContextValue = {
72
72
  scrollState: DrawerScrollState;
73
73
  setScrollState: (scrollState: DrawerScrollState) => void;
74
74
  };
@@ -188,6 +188,8 @@ export declare type DrawerProps = ComponentProps<DrawerSlots> & {
188
188
  type?: 'inline' | 'overlay';
189
189
  };
190
190
 
191
+ export declare const DrawerProvider: React_2.Provider<DrawerContextValue | undefined>;
192
+
191
193
  declare type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';
192
194
 
193
195
  export declare type DrawerSlots = {
@@ -375,6 +377,10 @@ export declare const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React
375
377
  */
376
378
  export declare const useDrawerBodyStyles_unstable: (state: DrawerBodyState) => DrawerBodyState;
377
379
 
380
+ export declare const useDrawerContext_unstable: () => DrawerContextValue;
381
+
382
+ export declare const useDrawerContextValue: () => DrawerContextValue;
383
+
378
384
  /**
379
385
  * Create the state required to render DrawerFooter.
380
386
  *
@@ -1 +1 @@
1
- {"version":3,"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */ export const useDrawerStyles_unstable = (state)=>{\n state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjDA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EAChF,OAAOD,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */ export const useDrawerStyles_unstable = (state)=>{\n state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjDA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EAChF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Bbc2r3f","xx9plb","qd6xl9","Byque4d","ngabwx","B1dvbpk","B5szp9g","iukgx1","Br7k87z","rurcny","Bf8kmfk","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n ':before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n ':before': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'top'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,oSAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,KAAK,CACR,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Bbc2r3f","xx9plb","qd6xl9","Byque4d","ngabwx","B1dvbpk","B5szp9g","iukgx1","Br7k87z","rurcny","Bf8kmfk","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n ':before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n ':before': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'top'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,oSAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,KAAK,CACR,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","mpb1vu","Hdbjpj","cnmfks","jc51t6","Bmyypfa","Bkbwdz4","mafdb0","wbfbqe","Jgwf15","Bs6t6z0","Bj55yzk","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n ':after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n ':after': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'bottom'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sRAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,QAAQ,CACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","mpb1vu","Hdbjpj","cnmfks","jc51t6","Bmyypfa","Bkbwdz4","mafdb0","wbfbqe","Jgwf15","Bs6t6z0","Bj55yzk","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n ':after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n ':after': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'bottom'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sRAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,QAAQ,CACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,iHAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,wCAAwC,GAAIC,KAAK,IAAG;EACjE,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,iHAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,wCAAwC,GAAIC,KAAK,IAAG;EACjE,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n const styles = useStyles();\n const { heading: root = {}, action, components } = state;\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action\n },\n root,\n action\n });\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n if (state.heading) {\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n if (state.action) {\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAEW;EAAW,CAAC,GAAGF,KAAK;EACxDd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n const styles = useStyles();\n const { heading: root = {}, action, components } = state;\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action\n },\n root,\n action\n });\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n if (state.heading) {\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n if (state.action) {\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAEW;EAAW,CAAC,GAAGF,KAAK;EACxDd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","separatorBottom","B4j52fo","icvyot","g2u3we","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n '1px',\n 'solid',\n tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n ...shorthands.borderRight(...separatorValues)\n },\n separatorEnd: {\n ...shorthands.borderLeft(...separatorValues)\n },\n separatorBottom: {\n ...shorthands.borderTop(...separatorValues)\n },\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n },\n bottom: {\n transform: `translate3D(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity, transform',\n willChange: 'opacity, transform'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)'\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMY,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPR,MAAM,CAACS,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAqB3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGjC,QAAA;EAAA;IAAAkC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAP,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAU7B,CAAC;AACF,SAASM,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAAC1B,cAAc;IACpC,KAAK,KAAK;MACN,OAAO0B,UAAU,CAACtB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOsB,UAAU,CAAClB,eAAe;IACrC;MACI,OAAOoB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,MAAMM,WAAW,GAAGnC,oBAAoB,CAAC,CAAC;EAC1C,MAAMoC,cAAc,GAAGxC,uBAAuB,CAACiC,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGlC,mBAAmB,CAAC,CAAC;EACxC,MAAMmC,gBAAgB,GAAGzC,mBAAmB,CAACgC,KAAK,CAACU,MAAM,EAAEhB,qBAAqB,CAAC,CAAC,CAAC;EACnFM,KAAK,CAAC9B,IAAI,CAACyC,SAAS,GAAGjD,YAAY,CAACO,sBAAsB,CAACC,IAAI,EAAEoC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEK,gBAAgB,EAAET,KAAK,CAAC9B,IAAI,CAACyC,SAAS,CAAC;EACvM,OAAOX,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","separatorBottom","B4j52fo","icvyot","g2u3we","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n '1px',\n 'solid',\n tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n ...shorthands.borderRight(...separatorValues)\n },\n separatorEnd: {\n ...shorthands.borderLeft(...separatorValues)\n },\n separatorBottom: {\n ...shorthands.borderTop(...separatorValues)\n },\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n },\n bottom: {\n transform: `translate3D(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity, transform',\n willChange: 'opacity, transform'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)'\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMY,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPR,MAAM,CAACS,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAqB3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGjC,QAAA;EAAA;IAAAkC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAP,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAU7B,CAAC;AACF,SAASM,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAAC1B,cAAc;IACpC,KAAK,KAAK;MACN,OAAO0B,UAAU,CAACtB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOsB,UAAU,CAAClB,eAAe;IACrC;MACI,OAAOoB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,MAAMM,WAAW,GAAGnC,oBAAoB,CAAC,CAAC;EAC1C,MAAMoC,cAAc,GAAGxC,uBAAuB,CAACiC,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGlC,mBAAmB,CAAC,CAAC;EACxC,MAAMmC,gBAAgB,GAAGzC,mBAAmB,CAACgC,KAAK,CAACU,MAAM,EAAEhB,qBAAqB,CAAC,CAAC,CAAC;EACnFM,KAAK,CAAC9B,IAAI,CAACyC,SAAS,GAAGjD,YAAY,CAACO,sBAAsB,CAACC,IAAI,EAAEoC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEK,gBAAgB,EAAET,KAAK,CAAC9B,IAAI,CAACyC,SAAS,CAAC;EACvM,OAAOX,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","OverlayDrawerSurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n root: 'fui-OverlayDrawerSurface',\n backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGP,aAAA,6FAIlC,CAAC;AACF,MAAMQ,iBAAiB,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGd,YAAY,CAACY,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","OverlayDrawerSurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n root: 'fui-OverlayDrawerSurface',\n backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGP,aAAA,6FAIlC,CAAC;AACF,MAAMQ,iBAAiB,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGd,YAAY,CAACY,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -30,7 +30,7 @@ import { OverlayDrawerSurface } from './OverlayDrawerSurface';
30
30
  }
31
31
  });
32
32
  const dialog = slot.always({
33
- open: true,
33
+ open,
34
34
  defaultOpen,
35
35
  onOpenChange,
36
36
  inertTrapFocus,
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverlayDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\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 HTMLDivElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLDivElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n const motion = useMotion<HTMLDivElement>(open);\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 backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n },\n {\n elementType: OverlayDrawerSurface,\n defaultProps: {\n ref: useMergedRefs(ref, motion.ref),\n },\n },\n );\n\n const dialog = slot.always(\n {\n open: true,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\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 size,\n position,\n motion,\n };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","useMotion","useDrawerDefaultProps","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","defaultProps","dialog","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBG;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,SAASb,UAA0BM;IAEzC,MAAMQ,gBAAgBjB,KAAKkB,gBAAgB,CAACX,MAAMY,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeK,kBAAkB;IAEzE,MAAMI,OAAOrB,KAAKsB,MAAM,CACtB;QACE,GAAGf,KAAK;QACRY,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACEM,aAAalB;QACbmB,cAAc;YACZhB,KAAKP,cAAcO,KAAKQ,OAAOR,GAAG;QACpC;IACF;IAGF,MAAMiB,SAASzB,KAAKsB,MAAM,CACxB;QACEb,MAAM;QACNK;QACAC;QACAF;QACAD;QACA;;;OAGC,GACDc,UAAU;IACZ,GACA;QACEH,aAAarB;IACf;IAGF,OAAO;QACLyB,YAAY;YACVN,MAAMhB;YACNoB,QAAQvB;QACV;QAEAmB;QACAI;QAEAf;QACAC;QACAK;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["useOverlayDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\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 HTMLDivElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLDivElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n const motion = useMotion<HTMLDivElement>(open);\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 backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n },\n {\n elementType: OverlayDrawerSurface,\n defaultProps: {\n ref: useMergedRefs(ref, motion.ref),\n },\n },\n );\n\n const dialog = slot.always(\n {\n open,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\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 size,\n position,\n motion,\n };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","useMotion","useDrawerDefaultProps","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","defaultProps","dialog","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBG;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,SAASb,UAA0BM;IAEzC,MAAMQ,gBAAgBjB,KAAKkB,gBAAgB,CAACX,MAAMY,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeK,kBAAkB;IAEzE,MAAMI,OAAOrB,KAAKsB,MAAM,CACtB;QACE,GAAGf,KAAK;QACRY,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACEM,aAAalB;QACbmB,cAAc;YACZhB,KAAKP,cAAcO,KAAKQ,OAAOR,GAAG;QACpC;IACF;IAGF,MAAMiB,SAASzB,KAAKsB,MAAM,CACxB;QACEb;QACAK;QACAC;QACAF;QACAD;QACA;;;OAGC,GACDc,UAAU;IACZ,GACA;QACEH,aAAarB;IACf;IAGF,OAAO;QACLyB,YAAY;YACVN,MAAMhB;YACNoB,QAAQvB;QACV;QAEAmB;QACAI;QAEAf;QACAC;QACAK;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\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 transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n },\n bottom: {\n transform: `translate3D(0, calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0)`,\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n transitionProperty: 'transform, box-shadow, opacity',\n willChange: 'transform, box-shadow, opacity'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)',\n boxShadow: tokens.shadow64\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n willChange: 'opacity'\n },\n enter: {\n opacity: 1\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const durationStyles = useDrawerDurationStyles();\n const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], 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,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGf,QAAA;EAAAgB,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGxB,QAAA;EAAA;IAAAyB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAG9B,QAAA;EAAA;IAAAyB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAG5B,uBAAuB,CAAC2B,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGvB,oBAAoB,CAAC,CAAC;EAC1C,MAAMwB,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAG9B,uBAAuB,CAAC,CAAC;EAChD,MAAM+B,sBAAsB,GAAG9B,mBAAmB,CAACyB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAGhC,mBAAmB,CAACyB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMnB,QAAQ,GAAGsB,KAAK,CAACvB,IAAI,CAACC,QAAQ;EACpCsB,KAAK,CAACvB,IAAI,CAAC+B,SAAS,GAAGxC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEwB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACvB,IAAI,CAAC+B,SAAS,CAAC;EACxK,IAAI9B,QAAQ,EAAE;IACVA,QAAQ,CAAC8B,SAAS,GAAGxC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAE6B,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAEhC,QAAQ,CAAC8B,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\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 transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n },\n bottom: {\n transform: `translate3D(0, calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0)`,\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n transitionProperty: 'transform, box-shadow, opacity',\n willChange: 'transform, box-shadow, opacity'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)',\n boxShadow: tokens.shadow64\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n willChange: 'opacity'\n },\n enter: {\n opacity: 1\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const durationStyles = useDrawerDurationStyles();\n const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], 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,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGf,QAAA;EAAAgB,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGxB,QAAA;EAAA;IAAAyB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAG9B,QAAA;EAAA;IAAAyB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAG5B,uBAAuB,CAAC2B,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGvB,oBAAoB,CAAC,CAAC;EAC1C,MAAMwB,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAG9B,uBAAuB,CAAC,CAAC;EAChD,MAAM+B,sBAAsB,GAAG9B,mBAAmB,CAACyB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAGhC,mBAAmB,CAACyB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMnB,QAAQ,GAAGsB,KAAK,CAACvB,IAAI,CAACC,QAAQ;EACpCsB,KAAK,CAACvB,IAAI,CAAC+B,SAAS,GAAGxC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEwB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACvB,IAAI,CAAC+B,SAAS,CAAC;EACxK,IAAI9B,QAAQ,EAAE;IACVA,QAAQ,CAAC8B,SAAS,GAAGxC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAE6B,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAEhC,QAAQ,CAAC8B,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { DrawerProvider, useDrawerContextValue, useDrawerContext_unstable } from './contexts';
1
2
  export { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';
2
3
  export { OverlayDrawer, overlayDrawerClassNames, renderOverlayDrawer_unstable, useOverlayDrawerStyles_unstable, useOverlayDrawer_unstable } from './OverlayDrawer';
3
4
  export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './InlineDrawer';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n OverlayDrawer,\n overlayDrawerClassNames,\n renderOverlayDrawer_unstable,\n useOverlayDrawerStyles_unstable,\n useOverlayDrawer_unstable,\n} from './OverlayDrawer';\nexport type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './OverlayDrawer';\n\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n} from './InlineDrawer';\nexport type { InlineDrawerProps, InlineDrawerSlots, InlineDrawerState } from './InlineDrawer';\n\nexport {\n DrawerBody,\n drawerBodyClassNames,\n renderDrawerBody_unstable,\n useDrawerBodyStyles_unstable,\n useDrawerBody_unstable,\n} from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';\n\nexport {\n DrawerHeader,\n drawerHeaderClassNames,\n renderDrawerHeader_unstable,\n useDrawerHeaderStyles_unstable,\n useDrawerHeader_unstable,\n} from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader';\n\nexport {\n DrawerHeaderTitle,\n drawerHeaderTitleClassNames,\n renderDrawerHeaderTitle_unstable,\n useDrawerHeaderTitleStyles_unstable,\n useDrawerHeaderTitle_unstable,\n} from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle';\n\nexport {\n DrawerHeaderNavigation,\n drawerHeaderNavigationClassNames,\n renderDrawerHeaderNavigation_unstable,\n useDrawerHeaderNavigationStyles_unstable,\n useDrawerHeaderNavigation_unstable,\n} from './DrawerHeaderNavigation';\nexport type {\n DrawerHeaderNavigationProps,\n DrawerHeaderNavigationSlots,\n DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation';\n\nexport {\n DrawerFooter,\n drawerFooterClassNames,\n renderDrawerFooter_unstable,\n useDrawerFooterStyles_unstable,\n useDrawerFooter_unstable,\n} from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';\n"],"names":["Drawer","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,wBAAwB,EAAEC,kBAAkB,QAAQ,WAAW;AAGvG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAGzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAOlC,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { DrawerProvider, useDrawerContextValue, useDrawerContext_unstable } from './contexts';\nexport type { DrawerContextValue } from './contexts';\n\nexport { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n OverlayDrawer,\n overlayDrawerClassNames,\n renderOverlayDrawer_unstable,\n useOverlayDrawerStyles_unstable,\n useOverlayDrawer_unstable,\n} from './OverlayDrawer';\nexport type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './OverlayDrawer';\n\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n} from './InlineDrawer';\nexport type { InlineDrawerProps, InlineDrawerSlots, InlineDrawerState } from './InlineDrawer';\n\nexport {\n DrawerBody,\n drawerBodyClassNames,\n renderDrawerBody_unstable,\n useDrawerBodyStyles_unstable,\n useDrawerBody_unstable,\n} from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';\n\nexport {\n DrawerHeader,\n drawerHeaderClassNames,\n renderDrawerHeader_unstable,\n useDrawerHeaderStyles_unstable,\n useDrawerHeader_unstable,\n} from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader';\n\nexport {\n DrawerHeaderTitle,\n drawerHeaderTitleClassNames,\n renderDrawerHeaderTitle_unstable,\n useDrawerHeaderTitleStyles_unstable,\n useDrawerHeaderTitle_unstable,\n} from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle';\n\nexport {\n DrawerHeaderNavigation,\n drawerHeaderNavigationClassNames,\n renderDrawerHeaderNavigation_unstable,\n useDrawerHeaderNavigationStyles_unstable,\n useDrawerHeaderNavigation_unstable,\n} from './DrawerHeaderNavigation';\nexport type {\n DrawerHeaderNavigationProps,\n DrawerHeaderNavigationSlots,\n DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation';\n\nexport {\n DrawerFooter,\n drawerFooterClassNames,\n renderDrawerFooter_unstable,\n useDrawerFooterStyles_unstable,\n useDrawerFooter_unstable,\n} from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';\n"],"names":["DrawerProvider","useDrawerContextValue","useDrawerContext_unstable","Drawer","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":"AAAA,SAASA,cAAc,EAAEC,qBAAqB,EAAEC,yBAAyB,QAAQ,aAAa;AAG9F,SAASC,MAAM,EAAEC,qBAAqB,EAAEC,wBAAwB,EAAEC,kBAAkB,QAAQ,WAAW;AAGvG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAGzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAOlC,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","Bekrc4i","vrafjx","h3c5rm","oyh7mz","j35jbq","end","ibv6hh","wvpqe5","zhjwy3","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","m","useDrawerBottomBaseStyles","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n overflow: 'hidden',\n width: `var(${drawerCSSVars.drawerSizeVar})`,\n maxWidth: '100vw',\n height: 'auto',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n /* Motion */ entering: {\n transitionTimingFunction: tokens.curveDecelerateMid\n },\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n reducedMotion: {\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.001ms'\n }\n },\n /* Positioning */ start: {\n ...shorthands.borderRight(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n left: 0,\n right: 'auto'\n },\n end: {\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n right: 0,\n left: 'auto'\n },\n bottom: {\n bottom: 0,\n top: 'auto'\n },\n /* Sizes */ small: {\n [drawerCSSVars.drawerSizeVar]: '320px'\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px'\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px'\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100vw'\n }\n});\nexport const useDrawerBottomBaseStyles = makeStyles({\n /* Sizes for position bottom */ small: {\n [drawerCSSVars.drawerSizeVar]: '320px'\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px'\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px'\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100vh'\n }\n});\nexport const useDrawerDurationStyles = makeStyles({\n small: {\n transitionDuration: tokens.durationGentle\n },\n medium: {\n transitionDuration: tokens.durationSlow\n },\n large: {\n transitionDuration: tokens.durationSlower\n },\n full: {\n transitionDuration: tokens.durationUltraSlow\n }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n const durationStyles = useDrawerDurationStyles();\n return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,QAAQ,EAAE,QAAQ;EAClBC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAD,MAAA;EAAA;EAAAM,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAsC3B,CAAC;AACF,OAAO,MAAMC,yBAAyB,gBAAG/C,QAAA;EAAAwC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAaxC,CAAC;AACF,OAAO,MAAMG,uBAAuB,gBAAGhD,QAAA;EAAAwC,KAAA;IAAAS,OAAA;EAAA;EAAAP,MAAA;IAAAO,OAAA;EAAA;EAAAN,KAAA;IAAAM,OAAA;EAAA;EAAAL,IAAA;IAAAK,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMK,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGjC,eAAe,CAAC,CAAC;EACpC,MAAMkC,gBAAgB,GAAGR,yBAAyB,CAAC,CAAC;EACpD,MAAMS,cAAc,GAAGR,uBAAuB,CAAC,CAAC;EAChD,OAAO/C,YAAY,CAACqD,UAAU,CAACH,QAAQ,CAAC,EAAEA,QAAQ,KAAK,QAAQ,IAAII,gBAAgB,CAACH,IAAI,CAAC,EAAEI,cAAc,CAACJ,IAAI,CAAC,EAAED,QAAQ,KAAK,QAAQ,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAAC7B,aAAa,EAAE4B,MAAM,CAACI,IAAI,KAAK,UAAU,IAAIH,UAAU,CAAChC,QAAQ,EAAE+B,MAAM,CAACI,IAAI,KAAK,SAAS,IAAIH,UAAU,CAAC9B,OAAO,CAAC;AAC7R,CAAC"}
1
+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","Bekrc4i","vrafjx","h3c5rm","oyh7mz","j35jbq","end","ibv6hh","wvpqe5","zhjwy3","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","m","useDrawerBottomBaseStyles","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n overflow: 'hidden',\n width: `var(${drawerCSSVars.drawerSizeVar})`,\n maxWidth: '100vw',\n height: 'auto',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n /* Motion */ entering: {\n transitionTimingFunction: tokens.curveDecelerateMid\n },\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n reducedMotion: {\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.001ms'\n }\n },\n /* Positioning */ start: {\n ...shorthands.borderRight(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n left: 0,\n right: 'auto'\n },\n end: {\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n right: 0,\n left: 'auto'\n },\n bottom: {\n bottom: 0,\n top: 'auto'\n },\n /* Sizes */ small: {\n [drawerCSSVars.drawerSizeVar]: '320px'\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px'\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px'\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100vw'\n }\n});\nexport const useDrawerBottomBaseStyles = makeStyles({\n /* Sizes for position bottom */ small: {\n [drawerCSSVars.drawerSizeVar]: '320px'\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px'\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px'\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100vh'\n }\n});\nexport const useDrawerDurationStyles = makeStyles({\n small: {\n transitionDuration: tokens.durationGentle\n },\n medium: {\n transitionDuration: tokens.durationSlow\n },\n large: {\n transitionDuration: tokens.durationSlower\n },\n full: {\n transitionDuration: tokens.durationUltraSlow\n }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n const durationStyles = useDrawerDurationStyles();\n return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,QAAQ,EAAE,QAAQ;EAClBC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAD,MAAA;EAAA;EAAAM,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAsC3B,CAAC;AACF,OAAO,MAAMC,yBAAyB,gBAAG/C,QAAA;EAAAwC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAaxC,CAAC;AACF,OAAO,MAAMG,uBAAuB,gBAAGhD,QAAA;EAAAwC,KAAA;IAAAS,OAAA;EAAA;EAAAP,MAAA;IAAAO,OAAA;EAAA;EAAAN,KAAA;IAAAM,OAAA;EAAA;EAAAL,IAAA;IAAAK,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMK,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGjC,eAAe,CAAC,CAAC;EACpC,MAAMkC,gBAAgB,GAAGR,yBAAyB,CAAC,CAAC;EACpD,MAAMS,cAAc,GAAGR,uBAAuB,CAAC,CAAC;EAChD,OAAO/C,YAAY,CAACqD,UAAU,CAACH,QAAQ,CAAC,EAAEA,QAAQ,KAAK,QAAQ,IAAII,gBAAgB,CAACH,IAAI,CAAC,EAAEI,cAAc,CAACJ,IAAI,CAAC,EAAED,QAAQ,KAAK,QAAQ,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAAC7B,aAAa,EAAE4B,MAAM,CAACI,IAAI,KAAK,UAAU,IAAIH,UAAU,CAAChC,QAAQ,EAAE+B,MAAM,CAACI,IAAI,KAAK,SAAS,IAAIH,UAAU,CAAC9B,OAAO,CAAC;AAC7R,CAAC","ignoreList":[]}
@@ -33,7 +33,7 @@ const useOverlayDrawer_unstable = (props, ref)=>{
33
33
  }
34
34
  });
35
35
  const dialog = _reactutilities.slot.always({
36
- open: true,
36
+ open,
37
37
  defaultOpen,
38
38
  onOpenChange,
39
39
  inertTrapFocus,
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\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 HTMLDivElement of OverlayDrawer\n */ export const useOverlayDrawer_unstable = (props, ref)=>{\n const { open, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n const motion = useMotion(open);\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n const root = slot.always({\n ...props,\n backdrop: hasCustomBackdrop ? {\n ...backdropProps\n } : null\n }, {\n elementType: OverlayDrawerSurface,\n defaultProps: {\n ref: useMergedRefs(ref, motion.ref)\n }\n });\n const dialog = slot.always({\n open: true,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\n /**\n * children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */ children: null\n }, {\n elementType: Dialog\n });\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog\n },\n root,\n dialog,\n size,\n position,\n motion\n };\n};\n"],"names":["useOverlayDrawer_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","useMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","OverlayDrawerSurface","defaultProps","useMergedRefs","dialog","children","Dialog","components"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;6BACb;oCACG;uCACY;sCACD;AAS1B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGT;IACnF,MAAMU,SAASC,IAAAA,6BAAS,EAACT;IACzB,MAAMU,gBAAgBC,oBAAI,CAACC,gBAAgB,CAACd,MAAMe,QAAQ;IAC1D,MAAMC,oBAAoBV,cAAc,eAAeM,kBAAkB;IACzE,MAAMK,OAAOJ,oBAAI,CAACK,MAAM,CAAC;QACrB,GAAGlB,KAAK;QACRe,UAAUC,oBAAoB;YAC1B,GAAGJ,aAAa;QACpB,IAAI;IACR,GAAG;QACCO,aAAaC,0CAAoB;QACjCC,cAAc;YACVpB,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKS,OAAOT,GAAG;QACtC;IACJ;IACA,MAAMsB,SAASV,oBAAI,CAACK,MAAM,CAAC;QACvBhB,MAAM;QACNM;QACAC;QACAF;QACAD;QACA;;;OAGD,GAAGkB,UAAU;IAChB,GAAG;QACCL,aAAaM,mBAAM;IACvB;IACA,OAAO;QACHC,YAAY;YACRT,MAAMG,0CAAoB;YAC1BG,QAAQE,mBAAM;QAClB;QACAR;QACAM;QACApB;QACAC;QACAM;IACJ;AACJ"}
1
+ {"version":3,"sources":["useOverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\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 HTMLDivElement of OverlayDrawer\n */ export const useOverlayDrawer_unstable = (props, ref)=>{\n const { open, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n const motion = useMotion(open);\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n const root = slot.always({\n ...props,\n backdrop: hasCustomBackdrop ? {\n ...backdropProps\n } : null\n }, {\n elementType: OverlayDrawerSurface,\n defaultProps: {\n ref: useMergedRefs(ref, motion.ref)\n }\n });\n const dialog = slot.always({\n open,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\n /**\n * children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */ children: null\n }, {\n elementType: Dialog\n });\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog\n },\n root,\n dialog,\n size,\n position,\n motion\n };\n};\n"],"names":["useOverlayDrawer_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","useMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","OverlayDrawerSurface","defaultProps","useMergedRefs","dialog","children","Dialog","components"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;6BACb;oCACG;uCACY;sCACD;AAS1B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGT;IACnF,MAAMU,SAASC,IAAAA,6BAAS,EAACT;IACzB,MAAMU,gBAAgBC,oBAAI,CAACC,gBAAgB,CAACd,MAAMe,QAAQ;IAC1D,MAAMC,oBAAoBV,cAAc,eAAeM,kBAAkB;IACzE,MAAMK,OAAOJ,oBAAI,CAACK,MAAM,CAAC;QACrB,GAAGlB,KAAK;QACRe,UAAUC,oBAAoB;YAC1B,GAAGJ,aAAa;QACpB,IAAI;IACR,GAAG;QACCO,aAAaC,0CAAoB;QACjCC,cAAc;YACVpB,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKS,OAAOT,GAAG;QACtC;IACJ;IACA,MAAMsB,SAASV,oBAAI,CAACK,MAAM,CAAC;QACvBhB;QACAM;QACAC;QACAF;QACAD;QACA;;;OAGD,GAAGkB,UAAU;IAChB,GAAG;QACCL,aAAaM,mBAAM;IACvB;IACA,OAAO;QACHC,YAAY;YACRT,MAAMG,0CAAoB;YAC1BG,QAAQE,mBAAM;QAClB;QACAR;QACAM;QACApB;QACAC;QACAM;IACJ;AACJ"}
@@ -9,6 +9,15 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ DrawerProvider: function() {
13
+ return _contexts.DrawerProvider;
14
+ },
15
+ useDrawerContextValue: function() {
16
+ return _contexts.useDrawerContextValue;
17
+ },
18
+ useDrawerContext_unstable: function() {
19
+ return _contexts.useDrawerContext_unstable;
20
+ },
12
21
  Drawer: function() {
13
22
  return _Drawer.Drawer;
14
23
  },
@@ -127,6 +136,7 @@ _export(exports, {
127
136
  return _DrawerFooter.useDrawerFooter_unstable;
128
137
  }
129
138
  });
139
+ const _contexts = require("./contexts");
130
140
  const _Drawer = require("./Drawer");
131
141
  const _OverlayDrawer = require("./OverlayDrawer");
132
142
  const _InlineDrawer = require("./InlineDrawer");
@@ -1 +1 @@
1
- {"version":3,"sources":["index.js"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';\nexport { OverlayDrawer, overlayDrawerClassNames, renderOverlayDrawer_unstable, useOverlayDrawerStyles_unstable, useOverlayDrawer_unstable } from './OverlayDrawer';\nexport { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './InlineDrawer';\nexport { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './DrawerBody';\nexport { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './DrawerHeader';\nexport { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './DrawerHeaderTitle';\nexport { DrawerHeaderNavigation, drawerHeaderNavigationClassNames, renderDrawerHeaderNavigation_unstable, useDrawerHeaderNavigationStyles_unstable, useDrawerHeaderNavigation_unstable } from './DrawerHeaderNavigation';\nexport { DrawerFooter, drawerFooterClassNames, renderDrawerFooter_unstable, useDrawerFooterStyles_unstable, useDrawerFooter_unstable } from './DrawerFooter';\n"],"names":["Drawer","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC3EC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAChIC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;IAC3HC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;IACjHC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;IAC3HC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,sBAAsB;eAAtBA,8CAAsB;;IAAEC,gCAAgC;eAAhCA,wDAAgC;;IAAEC,qCAAqC;eAArCA,6DAAqC;;IAAEC,wCAAwC;eAAxCA,gEAAwC;;IAAEC,kCAAkC;eAAlCA,0DAAkC;;IAC7KC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;;wBAPxC;+BACqD;8BACL;4BACV;8BACU;mCACyB;wCACyB;8BAClD"}
1
+ {"version":3,"sources":["index.js"],"sourcesContent":["export { DrawerProvider, useDrawerContextValue, useDrawerContext_unstable } from './contexts';\nexport { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';\nexport { OverlayDrawer, overlayDrawerClassNames, renderOverlayDrawer_unstable, useOverlayDrawerStyles_unstable, useOverlayDrawer_unstable } from './OverlayDrawer';\nexport { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './InlineDrawer';\nexport { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './DrawerBody';\nexport { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './DrawerHeader';\nexport { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './DrawerHeaderTitle';\nexport { DrawerHeaderNavigation, drawerHeaderNavigationClassNames, renderDrawerHeaderNavigation_unstable, useDrawerHeaderNavigationStyles_unstable, useDrawerHeaderNavigation_unstable } from './DrawerHeaderNavigation';\nexport { DrawerFooter, drawerFooterClassNames, renderDrawerFooter_unstable, useDrawerFooterStyles_unstable, useDrawerFooter_unstable } from './DrawerFooter';\n"],"names":["DrawerProvider","useDrawerContextValue","useDrawerContext_unstable","Drawer","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":";;;;;;;;;;;IAASA,cAAc;eAAdA,wBAAc;;IAAEC,qBAAqB;eAArBA,+BAAqB;;IAAEC,yBAAyB;eAAzBA,mCAAyB;;IAChEC,MAAM;eAANA,cAAM;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC3EC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAChIC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;IAC3HC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;IACjHC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;IAC3HC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,sBAAsB;eAAtBA,8CAAsB;;IAAEC,gCAAgC;eAAhCA,wDAAgC;;IAAEC,qCAAqC;eAArCA,6DAAqC;;IAAEC,wCAAwC;eAAxCA,gEAAwC;;IAAEC,kCAAkC;eAAlCA,0DAAkC;;IAC7KC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;;0BARnD;wBACW;+BACqD;8BACL;4BACV;8BACU;mCACyB;wCACyB;8BAClD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-drawer",
3
- "version": "9.2.2",
3
+ "version": "9.3.1",
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.10.4",
38
+ "@fluentui/react-dialog": "^9.10.5",
39
39
  "@fluentui/react-jsx-runtime": "^9.0.37",
40
40
  "@fluentui/react-motion-preview": "^0.5.20",
41
41
  "@fluentui/react-shared-contexts": "^9.18.0",