@fluentui/react-drawer 9.1.9 → 9.1.11
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 +34 -9
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js +2 -2
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js +2 -2
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js +2 -2
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js +2 -2
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +2 -2
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +3 -3
- package/lib/e2e/DrawerShared.js.map +1 -1
- package/lib/shared/useDrawerBaseStyles.styles.js +1 -1
- package/lib/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js +4 -7
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js +2 -3
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js +2 -3
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js +2 -3
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js +2 -2
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +2 -3
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +13 -13
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js +1 -1
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,48 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 17 Apr 2024 21:47:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.11)
|
|
8
|
+
|
|
9
|
+
Wed, 17 Apr 2024 21:47:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.1.10..@fluentui/react-drawer_v9.1.11)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: refactor styles defined in makeResetStyles() to avoid shorthands.*() ([PR #30996](https://github.com/microsoft/fluentui/pull/30996) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-dialog to v9.10.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.10)
|
|
19
|
+
|
|
20
|
+
Tue, 02 Apr 2024 09:48:01 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.1.9..@fluentui/react-drawer_v9.1.10)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-dialog to v9.9.16 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
27
|
+
- Bump @fluentui/react-motion-preview to v0.5.18 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.9)
|
|
8
33
|
|
|
9
|
-
Mon, 18 Mar 2024 19:
|
|
34
|
+
Mon, 18 Mar 2024 19:50:46 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.1.8..@fluentui/react-drawer_v9.1.9)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
13
38
|
|
|
14
|
-
- Bump @fluentui/react-dialog to v9.9.15 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #
|
|
16
|
-
- Bump @fluentui/react-motion-preview to v0.5.17 ([PR #
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #
|
|
18
|
-
- Bump @fluentui/react-tabster to v9.19.5 ([PR #
|
|
19
|
-
- Bump @fluentui/react-theme to v9.1.19 ([PR #
|
|
20
|
-
- Bump @fluentui/react-utilities to v9.18.5 ([PR #
|
|
39
|
+
- Bump @fluentui/react-dialog to v9.9.15 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
40
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
41
|
+
- Bump @fluentui/react-motion-preview to v0.5.17 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
42
|
+
- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
43
|
+
- Bump @fluentui/react-tabster to v9.19.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
44
|
+
- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
45
|
+
- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
21
46
|
|
|
22
47
|
## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.8)
|
|
23
48
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerBodyClassNames = {
|
|
4
4
|
root: 'fui-DrawerBody'
|
|
@@ -6,7 +6,7 @@ export const drawerBodyClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/__resetStyles("
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("r1boqb07", null, [".r1boqb07{margin:-1px 0;padding:1px var(--spacingHorizontalXXL);overflow:auto;flex:1;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}", ".r1boqb07:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".r1boqb07:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]);
|
|
10
10
|
/**
|
|
11
11
|
* Apply styling to the DrawerBody slots based on the state
|
|
12
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","
|
|
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 margin: '-1px 0',\n padding: `1px ${tokens.spacingHorizontalXXL}`,\n overflow: 'auto',\n flex: 1,\n alignSelf: 'stretch',\n // A \"good hack\" to display top and bottom borders based on the scroll position\n backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n 'background-position': 'bottom center, top center, bottom center, top center',\n backgroundRepeat: 'no-repeat',\n backgroundColor: tokens.colorNeutralBackground1,\n backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n backgroundAttachment: 'local, local, scroll, scroll',\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,g9BAsBrB,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,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerFooterClassNames = {
|
|
4
4
|
root: 'fui-DrawerFooter'
|
|
@@ -6,7 +6,7 @@ export const drawerFooterClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/__resetStyles("
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("r41rrse", null, [".r41rrse{padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}"]);
|
|
10
10
|
/**
|
|
11
11
|
* Apply styling to the DrawerFooter slots based on the state
|
|
12
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n width: '100%',\n maxWidth: '100%',\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box'\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.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,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,sQASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerHeaderClassNames = {
|
|
4
4
|
root: 'fui-DrawerHeader'
|
|
@@ -6,7 +6,7 @@ export const drawerHeaderClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/__resetStyles("
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("r11m9gl0", null, [".r11m9gl0{padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"]);
|
|
10
10
|
/**
|
|
11
11
|
* Apply styling to the DrawerHeader slots based on the state
|
|
12
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n width: '100%',\n maxWidth: '100%',\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box'\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.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,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,4PASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerHeaderNavigationClassNames = {
|
|
4
4
|
root: 'fui-DrawerHeaderNavigation'
|
|
@@ -6,7 +6,7 @@ export const drawerHeaderNavigationClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/__resetStyles("
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("r1ig4pwh", null, [".r1ig4pwh{margin:calc(var(--spacingVerticalS) * -1) calc(var(--spacingHorizontalL) * -1);}"]);
|
|
10
10
|
/**
|
|
11
11
|
* Apply styling to the DrawerHeaderNavigation slots based on the state
|
|
12
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","
|
|
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"}
|
|
@@ -5,7 +5,7 @@ import { useMotionClassNames } from '@fluentui/react-motion-preview';
|
|
|
5
5
|
export const inlineDrawerClassNames = {
|
|
6
6
|
root: 'fui-InlineDrawer'
|
|
7
7
|
};
|
|
8
|
-
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("
|
|
8
|
+
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("rkjj3x6", null, [".rkjj3x6{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}"]);
|
|
9
9
|
/**
|
|
10
10
|
* Styles for the root slot
|
|
11
11
|
*/
|
|
@@ -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,
|
|
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"}
|
package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const OverlayDrawerSurfaceClassNames = {
|
|
4
4
|
root: 'fui-OverlayDrawerSurface',
|
|
@@ -7,7 +7,7 @@ export const OverlayDrawerSurfaceClassNames = {
|
|
|
7
7
|
/**
|
|
8
8
|
* Styles for the backdrop slot
|
|
9
9
|
*/
|
|
10
|
-
const useBackdropResetStyles = /*#__PURE__*/__resetStyles("
|
|
10
|
+
const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rmnljus", null, [".rmnljus{inset:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"]);
|
|
11
11
|
const useBackdropStyles = /*#__PURE__*/__styles({
|
|
12
12
|
nested: {
|
|
13
13
|
De3pzq: "f1c21dwh"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","
|
|
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"}
|
|
@@ -11,9 +11,9 @@ export const overlayDrawerClassNames = {
|
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
|
-
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("
|
|
15
|
-
r: [".
|
|
16
|
-
s: ["@media (forced-colors: active){.
|
|
14
|
+
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1mbnmj9", "rem9xf8", {
|
|
15
|
+
r: [".r1mbnmj9{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}", ".r1mbnmj9:focus{outline-style:none;}", ".r1mbnmj9:focus-visible{outline-style:none;}", ".r1mbnmj9[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1mbnmj9[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rem9xf8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}", ".rem9xf8:focus{outline-style:none;}", ".rem9xf8:focus-visible{outline-style:none;}", ".rem9xf8[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rem9xf8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
16
|
+
s: ["@media (forced-colors: active){.r1mbnmj9[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.rem9xf8[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
|
|
17
17
|
});
|
|
18
18
|
const useDrawerRootStyles = /*#__PURE__*/__styles({
|
|
19
19
|
start: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { DrawerProps } from '
|
|
1
|
+
{"version":3,"sources":["DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\n\nimport type { DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSX.Element) => {\n mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: React.ComponentType<DrawerProps>) {\n describe('basic functionality', () => {\n it('should not render any element when closed', () => {\n mountFluent(<Component id=\"drawer\" />);\n\n cy.get('#drawer').should('not.exist');\n });\n\n it('should render an element when opened', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.get('#drawer').should('exist');\n });\n\n it('should render children content', () => {\n const content = 'Test the renderization';\n mountFluent(\n <Component id=\"drawer\" open>\n {content}\n </Component>,\n );\n\n cy.get('#drawer').contains(content);\n });\n\n it('should toggle visibility on open prop change', () => {\n const ExampleDrawer = () => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <Component id=\"drawer\" open={open} />\n <button id=\"button\" onClick={() => setOpen(true)}>\n Open\n </button>\n </>\n );\n };\n\n mountFluent(<ExampleDrawer />);\n\n cy.get('#drawer').should('not.exist');\n cy.get('#button').click();\n cy.get('#drawer').should('exist');\n });\n });\n\n describe('size prop', () => {\n const sizes = {\n small: 320,\n medium: 592,\n large: 940,\n full: 1000,\n };\n\n Object.entries(sizes).forEach(([size, width]) => {\n const sizeProp = size as DrawerProps['size'];\n\n it(`should have correct size when size is ${size}`, () => {\n mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n cy.viewport(1000, 1000);\n cy.get('#drawer').should('have.css', 'width', width + 'px');\n cy.get('#drawer').invoke('outerWidth').should('equal', width);\n });\n });\n\n it('width should not be bigger than viewport', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.viewport(319, 319);\n cy.get('#drawer').should('have.css', 'width', '319px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n });\n\n it('should have custom size', () => {\n mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n cy.get('#drawer').should('have.css', 'width', '200px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n });\n });\n\n describe('position prop', () => {\n const positions = {\n start: 'left',\n end: 'right',\n bottom: 'bottom',\n };\n\n Object.entries(positions).forEach(([position, side]) => {\n const positionProp = position as DrawerProps['position'];\n\n it(`should have correct position when position is ${position}`, () => {\n mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n cy.get('#drawer').should('have.css', side, '0px');\n });\n });\n });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ export const drawerCSSVars = {
|
|
|
10
10
|
* Default shared styles for the Drawer component
|
|
11
11
|
*/
|
|
12
12
|
export const drawerDefaultStyles = {
|
|
13
|
-
|
|
13
|
+
overflow: 'hidden',
|
|
14
14
|
width: `var(${drawerCSSVars.drawerSizeVar})`,
|
|
15
15
|
maxWidth: '100vw',
|
|
16
16
|
height: 'auto',
|
|
@@ -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
|
|
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"}
|
|
@@ -22,13 +22,10 @@ const drawerBodyClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
27
|
-
".
|
|
28
|
-
".
|
|
29
|
-
".r1ppc5ap{margin-top:-1px;margin-left:0;margin-bottom:-1px;margin-right:0;padding-top:1px;padding-left:var(--spacingHorizontalXXL);padding-bottom:1px;padding-right:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}",
|
|
30
|
-
".r1ppc5ap:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
|
|
31
|
-
".r1ppc5ap:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"
|
|
25
|
+
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1boqb07", null, [
|
|
26
|
+
".r1boqb07{margin:-1px 0;padding:1px var(--spacingHorizontalXXL);overflow:auto;flex:1;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}",
|
|
27
|
+
".r1boqb07:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
|
|
28
|
+
".r1boqb07:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"
|
|
32
29
|
]);
|
|
33
30
|
const useDrawerBodyStyles_unstable = (state)=>{
|
|
34
31
|
const styles = useStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, 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 */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r1boqb07\", null, [\".r1boqb07{margin:-1px 0;padding:1px var(--spacingHorizontalXXL);overflow:auto;flex:1;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}\", \".r1boqb07:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".r1boqb07:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]);\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAUAC,4BAA4B;eAA5BA;;;uBAZ+B;AAErC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAA6xB;IAAiF;CAA8E;AAIr/B,MAAMH,+BAA+BI,CAAAA;IAC1C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,qBAAqBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC3F,OAAOF;AACT,GACA,sDAAsD"}
|
|
@@ -22,9 +22,8 @@ const drawerFooterClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
27
|
-
".r4bpumq{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}"
|
|
25
|
+
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r41rrse", null, [
|
|
26
|
+
".r41rrse{padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}"
|
|
28
27
|
]);
|
|
29
28
|
const useDrawerFooterStyles_unstable = (state)=>{
|
|
30
29
|
const styles = useStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r41rrse\", null, [\".r41rrse{padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}\"]);\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ+B;AAErC,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAmP;AAI3S,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}
|
|
@@ -22,9 +22,8 @@ const drawerHeaderClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
27
|
-
".r116c7xc{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"
|
|
25
|
+
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r11m9gl0", null, [
|
|
26
|
+
".r11m9gl0{padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"
|
|
28
27
|
]);
|
|
29
28
|
const useDrawerHeaderStyles_unstable = (state)=>{
|
|
30
29
|
const styles = useStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r11m9gl0\", null, [\".r11m9gl0{padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}\"]);\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ+B;AAErC,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAwO;AAIjS,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}
|
package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js
CHANGED
|
@@ -22,9 +22,8 @@ const drawerHeaderNavigationClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
27
|
-
".r4yk2e8{margin-top:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);}"
|
|
25
|
+
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1ig4pwh", null, [
|
|
26
|
+
".r1ig4pwh{margin:calc(var(--spacingVerticalS) * -1) calc(var(--spacingHorizontalL) * -1);}"
|
|
28
27
|
]);
|
|
29
28
|
const useDrawerHeaderNavigationStyles_unstable = (state)=>{
|
|
30
29
|
const styles = useStyles();
|
package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { __resetStyles, 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 */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r1ig4pwh\", null, [\".r1ig4pwh{margin:calc(var(--spacingVerticalS) * -1) calc(var(--spacingHorizontalL) * -1);}\"]);\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerHeaderNavigationStyles.styles.js.map"],"names":["drawerHeaderNavigationClassNames","useDrawerHeaderNavigationStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,gCAAgC;eAAhCA;;IAUAC,wCAAwC;eAAxCA;;;uBAZ+B;AAErC,MAAMD,mCAAmC;IAC9CE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA6F;AAItJ,MAAMH,2CAA2CI,CAAAA;IACtD,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,iCAAiCE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACT,GACA,kEAAkE"}
|
|
@@ -23,8 +23,8 @@ const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
|
23
23
|
const inlineDrawerClassNames = {
|
|
24
24
|
root: 'fui-InlineDrawer'
|
|
25
25
|
};
|
|
26
|
-
const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
27
|
-
".
|
|
26
|
+
const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rkjj3x6", null, [
|
|
27
|
+
".rkjj3x6{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}"
|
|
28
28
|
]);
|
|
29
29
|
/**
|
|
30
30
|
* Styles for the root slot
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 = /*#__PURE__*/__resetStyles(\"
|
|
1
|
+
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 = /*#__PURE__*/__resetStyles(\"rkjj3x6\", null, [\".rkjj3x6{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\n/**\n * Styles for the root slot\n */\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n separatorStart: {\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n },\n separatorEnd: {\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n },\n separatorBottom: {\n B4j52fo: \"f5ogflp\",\n icvyot: \"fzkkow9\",\n g2u3we: \"fo8z57v\"\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1h1g6jt\"\n },\n bottom: {\n Bz10aip: \"f1rdfgt8\",\n a9b677: \"fly5x3f\",\n Bqenvij: \"fub80nq\"\n }\n}, {\n d: [\".f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}\", \".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}\", \".f5ogflp{border-top-width:1px;}\", \".fzkkow9{border-top-style:solid;}\", \".fo8z57v{border-top-color:var(--colorNeutralBackground3);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\", \".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}\", \".fly5x3f{width:100%;}\", \".fub80nq{height:var(--fui-Drawer--size);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f15rjlgw\",\n Es3by: \"f1blt7p\"\n },\n enter: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\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 */\nexport 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//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","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","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAqEAC,8BAA8B;eAA9BA;;;uBAzEqD;4BAC3C;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0T;AACpY;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAChDC,gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,iBAAiB;QACfC,SAAS;QACTC,QAAQ;QACRC,QAAQ;IACV;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAAmC;QAAqC;QAA8D;QAA+E;QAAoE;QAAoE;QAAyB;KAA4C;AAC/rB;AACA,MAAMC,wBAAwB,WAAW,GAAEpB,IAAAA,eAAQ,EAAC;IAClD,WAAW;QACTqB,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRP,SAAS;IACX;AACF,GAAG;IACDK,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AACA,SAASM,kBAAkBC,KAAK,EAAEC,UAAU;IAC1C,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IACA,OAAQH,MAAMI,QAAQ;QACpB,KAAK;YACH,OAAOH,WAAW1B,cAAc;QAClC,KAAK;YACH,OAAO0B,WAAWtB,YAAY;QAChC,KAAK;YACH,OAAOsB,WAAWlB,eAAe;QACnC;YACE,OAAOoB;IACX;AACF;AAIO,MAAMrC,iCAAiCkC,CAAAA;IAC5C,MAAMK,cAAcrC;IACpB,MAAMsC,iBAAiBC,IAAAA,kDAAuB,EAACP;IAC/C,MAAMQ,aAAanC;IACnB,MAAMoC,mBAAmBC,IAAAA,uCAAmB,EAACV,MAAMW,MAAM,EAAEjB;IAC3DM,MAAMjC,IAAI,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,uBAAuBE,IAAI,EAAEsC,aAAaC,gBAAgBP,kBAAkBC,OAAOQ,aAAaA,UAAU,CAACR,MAAMI,QAAQ,CAAC,EAAEK,kBAAkBT,MAAMjC,IAAI,CAAC6C,SAAS;IACtM,OAAOZ;AACT,GACA,wDAAwD"}
|
|
@@ -23,9 +23,8 @@ const OverlayDrawerSurfaceClassNames = {
|
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* Styles for the backdrop slot
|
|
26
|
-
*/ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
27
|
-
".
|
|
28
|
-
".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"
|
|
26
|
+
*/ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rmnljus", null, [
|
|
27
|
+
".rmnljus{inset:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"
|
|
29
28
|
]);
|
|
30
29
|
const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
31
30
|
nested: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 */\nconst useBackdropResetStyles = /*#__PURE__*/__resetStyles(\"rmnljus\", null, [\".rmnljus{inset:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n nested: {\n De3pzq: \"f1c21dwh\"\n }\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\"]\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport 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//# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map"],"names":["OverlayDrawerSurfaceClassNames","useOverlayDrawerSurfaceStyles_unstable","root","backdrop","useBackdropResetStyles","__resetStyles","useBackdropStyles","__styles","nested","De3pzq","d","state","backdropResetStyles","backdropStyles","className","mergeClasses","isNestedDialog"],"mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IAkBAC,sCAAsC;eAAtCA;;;uBApByC;AAE/C,MAAMD,iCAAiC;IAC5CE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0E;AACtJ,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC9CC,QAAQ;QACNC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiE;AACvE;AAIO,MAAMT,yCAAyCU,CAAAA;IACpD,MAAMC,sBAAsBR;IAC5B,MAAMS,iBAAiBP;IACvB,IAAIK,MAAMR,QAAQ,EAAE;QAClBQ,MAAMR,QAAQ,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACH,qBAAqBD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAAEG,MAAMR,QAAQ,CAACW,SAAS;IACtI;IACA,OAAOH;AACT,GACA,gEAAgE"}
|
|
@@ -27,22 +27,22 @@ const overlayDrawerClassNames = {
|
|
|
27
27
|
};
|
|
28
28
|
/**
|
|
29
29
|
* Styles for the root slot
|
|
30
|
-
*/ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("
|
|
30
|
+
*/ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r1mbnmj9", "rem9xf8", {
|
|
31
31
|
r: [
|
|
32
|
-
".
|
|
33
|
-
".
|
|
34
|
-
".
|
|
35
|
-
".
|
|
36
|
-
".
|
|
37
|
-
".
|
|
38
|
-
".
|
|
39
|
-
".
|
|
40
|
-
".
|
|
41
|
-
".
|
|
32
|
+
".r1mbnmj9{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}",
|
|
33
|
+
".r1mbnmj9:focus{outline-style:none;}",
|
|
34
|
+
".r1mbnmj9:focus-visible{outline-style:none;}",
|
|
35
|
+
".r1mbnmj9[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
36
|
+
".r1mbnmj9[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
37
|
+
".rem9xf8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}",
|
|
38
|
+
".rem9xf8:focus{outline-style:none;}",
|
|
39
|
+
".rem9xf8:focus-visible{outline-style:none;}",
|
|
40
|
+
".rem9xf8[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
41
|
+
".rem9xf8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
42
42
|
],
|
|
43
43
|
s: [
|
|
44
|
-
"@media (forced-colors: active){.
|
|
45
|
-
"@media (forced-colors: active){.
|
|
44
|
+
"@media (forced-colors: active){.r1mbnmj9[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
|
|
45
|
+
"@media (forced-colors: active){.rem9xf8[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
46
46
|
]
|
|
47
47
|
});
|
|
48
48
|
const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, 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 */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, 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 */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r1mbnmj9\", \"rem9xf8\", {\n r: [\".r1mbnmj9{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".r1mbnmj9:focus{outline-style:none;}\", \".r1mbnmj9:focus-visible{outline-style:none;}\", \".r1mbnmj9[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1mbnmj9[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rem9xf8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".rem9xf8:focus{outline-style:none;}\", \".rem9xf8:focus-visible{outline-style:none;}\", \".rem9xf8[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rem9xf8[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r1mbnmj9[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rem9xf8[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1g0pcr8\"\n },\n bottom: {\n Bz10aip: \"fip488n\",\n Bhzewxz: \"f198g47y\",\n Bqenvij: \"fub80nq\",\n a9b677: \"fr97h3j\"\n }\n}, {\n d: [\".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".fip488n{transform:translate3D(0, calc(var(--fui-Drawer--size) * 1), 0);}\", \".f198g47y{top:auto;}\", \".fub80nq{height:var(--fui-Drawer--size);}\", \".fr97h3j{width:100vw;}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n E5pizo: \"ff88big\",\n Bmy1vo4: \"f1neo61\",\n Es3by: \"f1ytgekk\"\n },\n enter: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\",\n E5pizo: \"f10nrhrw\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".ff88big{box-shadow:0px var(--colorTransparentBackground);}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f13u1uyl\",\n Bkqvd7p: \"f17wnm97\",\n Es3by: \"f1gqqdtu\"\n },\n enter: {\n abs64n: \"f5p0z4x\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport 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//# sourceMappingURL=useOverlayDrawerStyles.styles.js.map"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","durationStyles","useDrawerDurationStyles","drawerMotionClassNames","useMotionClassNames","motion","backdropMotionClassNames","className","mergeClasses","position","size"],"mappings":";;;;;;;;;;;IAMaA,uBAAuB;eAAvBA;;IA6DAC,+BAA+B;eAA/BA;;;;iEAnEU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,YAAY,WAAW;IAC7EC,GAAG;QAAC;QAAwU;QAAwC;QAAgD;QAAiK;QAAmvB;QAAuU;QAAuC;QAA+C;QAAgK;KAAivB;IACtmFC,GAAG;QAAC;QAAgM;KAA8L;AACpY;AACA,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA+E;QAA8E;QAA6E;QAAwB;QAA6C;KAAyB;AAC9U;AACA,MAAMC,wBAAwB,WAAW,GAAET,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTU,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;QACRR,SAAS;QACTS,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAwB;QAA+D;QAA+D;QAAwD;QAAwB;QAA6C;KAAyC;AAClU;AACA;;CAEC,GACD,MAAMO,0BAA0B,WAAW,GAAEf,IAAAA,gBAAQ,EAAC;IACpD,WAAW;QACTU,QAAQ;QACRE,SAAS;QACTI,SAAS;QACTH,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;IACV;AACF,GAAG;IACDF,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMhB,kCAAkCyB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAczB;IACpB,MAAM0B,aAAatB;IACnB,MAAMuB,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMC,yBAAyBC,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEjB;IACjE,MAAMkB,2BAA2BF,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEX;IACnE,MAAMrB,WAAWuB,MAAMxB,IAAI,CAACC,QAAQ;IACpCuB,MAAMxB,IAAI,CAACmC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBE,IAAI,EAAEyB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMxB,IAAI,CAACmC,SAAS;IACvK,IAAIlC,UAAU;QACZA,SAASkC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBG,QAAQ,EAAEiC,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAErC,SAASkC,SAAS;IAC9I;IACA,OAAOX;AACT,GACA,yDAAyD"}
|
|
@@ -31,7 +31,7 @@ const drawerCSSVars = {
|
|
|
31
31
|
drawerSizeVar: '--fui-Drawer--size'
|
|
32
32
|
};
|
|
33
33
|
const drawerDefaultStyles = {
|
|
34
|
-
|
|
34
|
+
overflow: 'hidden',
|
|
35
35
|
width: `var(${drawerCSSVars.drawerSizeVar})`,
|
|
36
36
|
maxWidth: '100vw',
|
|
37
37
|
height: 'auto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles = {\n
|
|
1
|
+
{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport 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 */\nconst useDrawerStyles = /*#__PURE__*/__styles({\n entering: {\n Bkqvd7p: \"f18ad807\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n reducedMotion: {\n Hwfdqs: \"f5e8c63\"\n },\n start: {\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n j35jbq: [\"fvfyk4\", \"frppm18\"]\n },\n end: {\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n zhjwy3: [\"fjscplz\", \"f1gn591s\"],\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n oyh7mz: [\"frppm18\", \"fvfyk4\"]\n },\n bottom: {\n B5kzvoi: \"f1yab3r1\",\n Bhzewxz: \"f198g47y\"\n },\n small: {\n Bjr0ffy: \"f1exhnwo\"\n },\n medium: {\n Bjr0ffy: \"fqofjzu\"\n },\n large: {\n Bjr0ffy: \"fce6y3m\"\n },\n full: {\n Bjr0ffy: \"fsdmzs6\"\n }\n}, {\n d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", \".f5tn483{border-right-width:var(--strokeWidthThin);}\", \".f1ojsxk5{border-left-width:var(--strokeWidthThin);}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".f1gn591s{border-right-color:var(--colorTransparentStroke);}\", \".fjscplz{border-left-color:var(--colorTransparentStroke);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1yab3r1{bottom:0;}\", \".f198g47y{top:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }]]\n});\nexport const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({\n small: {\n Bjr0ffy: \"f1exhnwo\"\n },\n medium: {\n Bjr0ffy: \"fqofjzu\"\n },\n large: {\n Bjr0ffy: \"fce6y3m\"\n },\n full: {\n Bjr0ffy: \"fno8cgj\"\n }\n}, {\n d: [\".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fno8cgj{--fui-Drawer--size:100vh;}\"]\n});\nexport const useDrawerDurationStyles = /*#__PURE__*/__styles({\n small: {\n B3o57yi: \"fc397y7\"\n },\n medium: {\n B3o57yi: \"f78771\"\n },\n large: {\n B3o57yi: \"f9ymmep\"\n },\n full: {\n B3o57yi: \"f1loko9l\"\n }\n}, {\n d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n position,\n size,\n motion\n}) => {\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//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBottomBaseStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","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","B3o57yi","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","mergeClasses","type"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.11",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.
|
|
39
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
40
|
-
"@fluentui/react-motion-preview": "^0.5.
|
|
41
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
38
|
+
"@fluentui/react-dialog": "^9.10.0",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.35",
|
|
40
|
+
"@fluentui/react-motion-preview": "^0.5.18",
|
|
41
|
+
"@fluentui/react-shared-contexts": "^9.16.0",
|
|
42
|
+
"@fluentui/react-tabster": "^9.20.0",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.19",
|
|
44
|
-
"@fluentui/react-utilities": "^9.18.
|
|
44
|
+
"@fluentui/react-utilities": "^9.18.6",
|
|
45
45
|
"@griffel/react": "^1.5.14",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|