@fluentui/react-drawer 9.3.0 → 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.
Files changed (16) hide show
  1. package/CHANGELOG.md +12 -2
  2. package/lib/components/Drawer/useDrawerStyles.styles.js.map +1 -1
  3. package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
  4. package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
  5. package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
  6. package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
  7. package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map +1 -1
  8. package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
  9. package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
  10. package/lib/components/OverlayDrawer/useOverlayDrawer.js +1 -1
  11. package/lib/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
  12. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
  13. package/lib/shared/useDrawerBaseStyles.styles.js.map +1 -1
  14. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js +1 -1
  15. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
  16. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,12 +1,22 @@
1
1
  # Change Log - @fluentui/react-drawer
2
2
 
3
- This log was last generated on Mon, 13 May 2024 12:33:31 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
+
7
17
  ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.3.0)
8
18
 
9
- Mon, 13 May 2024 12:33:31 GMT
19
+ Mon, 13 May 2024 12:34:19 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.2.2..@fluentui/react-drawer_v9.3.0)
11
21
 
12
22
  ### Minor changes
package/lib/components/Drawer/useDrawerStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib/components/OverlayDrawer/useOverlayDrawer.js CHANGED
@@ -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,
package/lib/components/OverlayDrawer/useOverlayDrawer.js.map CHANGED
@@ -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"}
package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map CHANGED
@@ -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/shared/useDrawerBaseStyles.styles.js.map CHANGED
@@ -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":[]}
package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js CHANGED
@@ -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,
package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map CHANGED
@@ -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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-drawer",
3
- "version": "9.3.0",
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",