@fluentui/react-drawer 9.5.9 → 9.5.10
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 +14 -2
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js +13 -13
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js +13 -13
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib/shared/useDrawerBaseStyles.styles.js +2 -2
- package/lib/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js +28 -28
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js +28 -28
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js +2 -2
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 15 Aug 2024 08:18:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.10)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Aug 2024 08:18:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.9..@fluentui/react-drawer_v9.5.10)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: change :after to ::after. ([PR #32236](https://github.com/microsoft/fluentui/pull/32236) by seanmonahan@microsoft.com)
|
|
15
|
+
- Bug fix for issue 31724 ([PR #32060](https://github.com/microsoft/fluentui/pull/32060) by lakshmimanasasai.t@gmail.com)
|
|
16
|
+
- Bump @fluentui/react-dialog to v9.11.10 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
18
|
+
|
|
7
19
|
## [9.5.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.9)
|
|
8
20
|
|
|
9
|
-
Tue, 06 Aug 2024 21:
|
|
21
|
+
Tue, 06 Aug 2024 21:40:45 GMT
|
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.8..@fluentui/react-drawer_v9.5.9)
|
|
11
23
|
|
|
12
24
|
### Patches
|
|
@@ -10,23 +10,23 @@ export const drawerFooterClassNames = {
|
|
|
10
10
|
const useStyles = /*#__PURE__*/__resetStyles("r1snvl2j", null, [".r1snvl2j{width:100%;max-width:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;position:relative;z-index:2;}"]);
|
|
11
11
|
const useDrawerFooterStyles = /*#__PURE__*/__styles({
|
|
12
12
|
separator: {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
Baz25je: "f16b62f1",
|
|
14
|
+
Brfgrao: "f1j7ml58",
|
|
15
|
+
mdwyqc: ["f1f351id", "f1fzr1x6"],
|
|
16
|
+
Fbdkly: ["f1fzr1x6", "f1f351id"],
|
|
17
|
+
vz82u: "f1dhznln",
|
|
18
|
+
cmx5o7: "f1p5zmk",
|
|
19
|
+
h7gv66: "f1ljjo4k",
|
|
20
|
+
B8bqphf: "ffd2d9j",
|
|
21
|
+
wjn42g: "ffdt3s5",
|
|
22
|
+
Ftih45: "f1wl9k8s",
|
|
23
|
+
Bciustq: "ffi060y"
|
|
24
24
|
},
|
|
25
25
|
separatorVisible: {
|
|
26
|
-
|
|
26
|
+
vz82u: "f1b3qyzu"
|
|
27
27
|
}
|
|
28
28
|
}, {
|
|
29
|
-
d: [".
|
|
29
|
+
d: [".f16b62f1::before{height:1px;}", ".f1j7ml58::before{position:absolute;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".f1dhznln::before{opacity:0;}", ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}", ".f1ljjo4k::before{transition-duration:var(--durationNormal);}", ".ffd2d9j::before{transition-property:opacity;}", ".ffdt3s5::before{transition-timing-function:var(--curveEasyEase);}", ".f1wl9k8s::before{content:\"\";}", ".ffi060y::before{top:0;}", ".f1b3qyzu::before{opacity:1;}"]
|
|
30
30
|
});
|
|
31
31
|
/**
|
|
32
32
|
* Apply styling to the DrawerFooter slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","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 'use no memo';\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,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,KAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,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":[]}
|
|
@@ -10,23 +10,23 @@ export const drawerHeaderClassNames = {
|
|
|
10
10
|
const useStyles = /*#__PURE__*/__resetStyles("r3ovn4i", null, [".r3ovn4i{width:100%;max-width:100%;padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;position:relative;z-index:2;}"]);
|
|
11
11
|
const useDrawerHeaderStyles = /*#__PURE__*/__styles({
|
|
12
12
|
separator: {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
Dlnsje: "fxnjyrl",
|
|
14
|
+
E3zdtr: "f1mdlcz9",
|
|
15
|
+
B1piin3: ["f15yvnhg", "f1n6gb5g"],
|
|
16
|
+
Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
|
|
17
|
+
Bp15pi3: "f1564nw5",
|
|
18
|
+
Bjyk6c5: "fdlpgxj",
|
|
19
|
+
F2fol1: "f15cmg8x",
|
|
20
|
+
Ba2ppi3: "f3f8dgl",
|
|
21
|
+
B1dyfl9: "fjvo4va",
|
|
22
|
+
Bsft5z2: "f13zj6fq",
|
|
23
|
+
By385i5: "fo72kxq"
|
|
24
24
|
},
|
|
25
25
|
separatorVisible: {
|
|
26
|
-
|
|
26
|
+
Bp15pi3: "fjsqi2x"
|
|
27
27
|
}
|
|
28
28
|
}, {
|
|
29
|
-
d: [".
|
|
29
|
+
d: [".fxnjyrl::after{height:1px;}", ".f1mdlcz9::after{position:absolute;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".f1564nw5::after{opacity:0;}", ".fdlpgxj::after{background-color:var(--colorNeutralStroke1);}", ".f15cmg8x::after{transition-duration:var(--durationNormal);}", ".f3f8dgl::after{transition-property:opacity;}", ".fjvo4va::after{transition-timing-function:var(--curveEasyEase);}", ".f13zj6fq::after{content:\"\";}", ".fo72kxq::after{bottom:0;}", ".fjsqi2x::after{opacity:1;}"]
|
|
30
30
|
});
|
|
31
31
|
/**
|
|
32
32
|
* Apply styling to the DrawerHeader slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","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 'use no memo';\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,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;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,aAAa;;EACb,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":[]}
|
|
@@ -81,10 +81,10 @@ export const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({
|
|
|
81
81
|
Bjr0ffy: "fce6y3m"
|
|
82
82
|
},
|
|
83
83
|
full: {
|
|
84
|
-
Bjr0ffy: "
|
|
84
|
+
Bjr0ffy: "f1rat34m"
|
|
85
85
|
}
|
|
86
86
|
}, {
|
|
87
|
-
d: [".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".
|
|
87
|
+
d: [".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".f1rat34m{--fui-Drawer--size:100%;}"]
|
|
88
88
|
});
|
|
89
89
|
export const useDrawerBaseClassNames = ({
|
|
90
90
|
position,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } 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 /* Positioning */ start: {\n borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n left: 0,\n right: 'auto'\n },\n end: {\n 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]: '
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } 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 /* Positioning */ start: {\n borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n left: 0,\n right: 'auto'\n },\n end: {\n 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]: '100%'\n }\n});\nexport const useDrawerBaseClassNames = ({ position, size })=>{\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,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,EAAE,OAAOJ,aAAa,CAACC,aAAa,GAAG;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,gBAAGpB,QAAA;EAAAqB,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAL,MAAA;IAAAD,MAAA;EAAA;EAAAO,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;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2B3B,CAAC;AACF,OAAO,MAAMC,yBAAyB,gBAAG3C,QAAA;EAAAoC,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,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAK,CAAC,KAAG;EACzD,MAAMC,UAAU,GAAG3B,eAAe,CAAC,CAAC;EACpC,MAAM4B,gBAAgB,GAAGL,yBAAyB,CAAC,CAAC;EACpD,OAAO1C,YAAY,CAAC8C,UAAU,CAACF,QAAQ,CAAC,EAAEA,QAAQ,KAAK,QAAQ,IAAIG,gBAAgB,CAACF,IAAI,CAAC,EAAED,QAAQ,KAAK,QAAQ,IAAIE,UAAU,CAACD,IAAI,CAAC,CAAC;AACzI,CAAC","ignoreList":[]}
|
|
@@ -27,41 +27,41 @@ const drawerFooterClassNames = {
|
|
|
27
27
|
]);
|
|
28
28
|
const useDrawerFooterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
29
29
|
separator: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
"
|
|
30
|
+
Baz25je: "f16b62f1",
|
|
31
|
+
Brfgrao: "f1j7ml58",
|
|
32
|
+
mdwyqc: [
|
|
33
|
+
"f1f351id",
|
|
34
|
+
"f1fzr1x6"
|
|
35
35
|
],
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
"
|
|
36
|
+
Fbdkly: [
|
|
37
|
+
"f1fzr1x6",
|
|
38
|
+
"f1f351id"
|
|
39
39
|
],
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
vz82u: "f1dhznln",
|
|
41
|
+
cmx5o7: "f1p5zmk",
|
|
42
|
+
h7gv66: "f1ljjo4k",
|
|
43
|
+
B8bqphf: "ffd2d9j",
|
|
44
|
+
wjn42g: "ffdt3s5",
|
|
45
|
+
Ftih45: "f1wl9k8s",
|
|
46
|
+
Bciustq: "ffi060y"
|
|
47
47
|
},
|
|
48
48
|
separatorVisible: {
|
|
49
|
-
|
|
49
|
+
vz82u: "f1b3qyzu"
|
|
50
50
|
}
|
|
51
51
|
}, {
|
|
52
52
|
d: [
|
|
53
|
-
".
|
|
54
|
-
".
|
|
55
|
-
".
|
|
56
|
-
".
|
|
57
|
-
".
|
|
58
|
-
".
|
|
59
|
-
".
|
|
60
|
-
".
|
|
61
|
-
".
|
|
62
|
-
".
|
|
63
|
-
".
|
|
64
|
-
".
|
|
53
|
+
".f16b62f1::before{height:1px;}",
|
|
54
|
+
".f1j7ml58::before{position:absolute;}",
|
|
55
|
+
".f1f351id::before{right:0;}",
|
|
56
|
+
".f1fzr1x6::before{left:0;}",
|
|
57
|
+
".f1dhznln::before{opacity:0;}",
|
|
58
|
+
".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}",
|
|
59
|
+
".f1ljjo4k::before{transition-duration:var(--durationNormal);}",
|
|
60
|
+
".ffd2d9j::before{transition-property:opacity;}",
|
|
61
|
+
".ffdt3s5::before{transition-timing-function:var(--curveEasyEase);}",
|
|
62
|
+
".f1wl9k8s::before{content:\"\";}",
|
|
63
|
+
".ffi060y::before{top:0;}",
|
|
64
|
+
".f1b3qyzu::before{opacity:1;}"
|
|
65
65
|
]
|
|
66
66
|
});
|
|
67
67
|
const useDrawerFooterStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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 '
|
|
1
|
+
{"version":3,"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 'use no memo';\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"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","useDrawerFooterStyles","__styles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IAgCIC,8BAA8B;eAA9BA;;;uBAnCyC;AAGnD,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAWrB;AACD,MAAMC,wBAAqB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,WAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,OAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAP,OAAA;IAAA;AAAA,GAAA;IAAAQ,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAenB,MAAMnB,iCAAkCoB,CAAAA;IAC/C;IACA,MAAMC,SAASnB;IACf,MAAMoB,aAAalB;IACnBgB,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,uBAAuBE,IAAI,EAAEoB,QAAQD,MAAMK,WAAW,KAAK,UAAUH,WAAWhB,SAAS,EAAE;QAC3H;QACA;KACH,CAACoB,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IAClF,OAAOH;AACX"}
|
|
@@ -27,41 +27,41 @@ const drawerHeaderClassNames = {
|
|
|
27
27
|
]);
|
|
28
28
|
const useDrawerHeaderStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
29
29
|
separator: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
"
|
|
30
|
+
Dlnsje: "fxnjyrl",
|
|
31
|
+
E3zdtr: "f1mdlcz9",
|
|
32
|
+
B1piin3: [
|
|
33
|
+
"f15yvnhg",
|
|
34
|
+
"f1n6gb5g"
|
|
35
35
|
],
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
"
|
|
36
|
+
Eqx8gd: [
|
|
37
|
+
"f1n6gb5g",
|
|
38
|
+
"f15yvnhg"
|
|
39
39
|
],
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
Bp15pi3: "f1564nw5",
|
|
41
|
+
Bjyk6c5: "fdlpgxj",
|
|
42
|
+
F2fol1: "f15cmg8x",
|
|
43
|
+
Ba2ppi3: "f3f8dgl",
|
|
44
|
+
B1dyfl9: "fjvo4va",
|
|
45
|
+
Bsft5z2: "f13zj6fq",
|
|
46
|
+
By385i5: "fo72kxq"
|
|
47
47
|
},
|
|
48
48
|
separatorVisible: {
|
|
49
|
-
|
|
49
|
+
Bp15pi3: "fjsqi2x"
|
|
50
50
|
}
|
|
51
51
|
}, {
|
|
52
52
|
d: [
|
|
53
|
-
".
|
|
54
|
-
".
|
|
55
|
-
".
|
|
56
|
-
".
|
|
57
|
-
".
|
|
58
|
-
".
|
|
59
|
-
".
|
|
60
|
-
".
|
|
61
|
-
".
|
|
62
|
-
".
|
|
63
|
-
".
|
|
64
|
-
".
|
|
53
|
+
".fxnjyrl::after{height:1px;}",
|
|
54
|
+
".f1mdlcz9::after{position:absolute;}",
|
|
55
|
+
".f15yvnhg::after{right:0;}",
|
|
56
|
+
".f1n6gb5g::after{left:0;}",
|
|
57
|
+
".f1564nw5::after{opacity:0;}",
|
|
58
|
+
".fdlpgxj::after{background-color:var(--colorNeutralStroke1);}",
|
|
59
|
+
".f15cmg8x::after{transition-duration:var(--durationNormal);}",
|
|
60
|
+
".f3f8dgl::after{transition-property:opacity;}",
|
|
61
|
+
".fjvo4va::after{transition-timing-function:var(--curveEasyEase);}",
|
|
62
|
+
".f13zj6fq::after{content:\"\";}",
|
|
63
|
+
".fo72kxq::after{bottom:0;}",
|
|
64
|
+
".fjsqi2x::after{opacity:1;}"
|
|
65
65
|
]
|
|
66
66
|
});
|
|
67
67
|
const useDrawerHeaderStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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 '
|
|
1
|
+
{"version":3,"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 'use no memo';\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"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","useDrawerHeaderStyles","__styles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IAgCIC,8BAA8B;eAA9BA;;;uBAnCyC;AAGnD,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAWrB;AACD,MAAMC,wBAAqB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,WAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAP,SAAA;IAAA;AAAA,GAAA;IAAAQ,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAenB,MAAMnB,iCAAkCoB,CAAAA;IAC/C;IACA,MAAMC,SAASnB;IACf,MAAMoB,aAAalB;IACnBgB,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,uBAAuBE,IAAI,EAAEoB,QAAQD,MAAMK,WAAW,KAAK,UAAUH,WAAWhB,SAAS,EAAE;QAC3H;QACA;KACH,CAACoB,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IAClF,OAAOH;AACX"}
|
|
@@ -143,14 +143,14 @@ const useDrawerBottomBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
143
143
|
Bjr0ffy: "fce6y3m"
|
|
144
144
|
},
|
|
145
145
|
full: {
|
|
146
|
-
Bjr0ffy: "
|
|
146
|
+
Bjr0ffy: "f1rat34m"
|
|
147
147
|
}
|
|
148
148
|
}, {
|
|
149
149
|
d: [
|
|
150
150
|
".f1exhnwo{--fui-Drawer--size:320px;}",
|
|
151
151
|
".fqofjzu{--fui-Drawer--size:592px;}",
|
|
152
152
|
".fce6y3m{--fui-Drawer--size:940px;}",
|
|
153
|
-
".
|
|
153
|
+
".f1rat34m{--fui-Drawer--size:100%;}"
|
|
154
154
|
]
|
|
155
155
|
});
|
|
156
156
|
const useDrawerBaseClassNames = ({ position, size })=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } 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 /* Positioning */ start: {\n borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n left: 0,\n right: 'auto'\n },\n end: {\n 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]: '
|
|
1
|
+
{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } 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 /* Positioning */ start: {\n borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n left: 0,\n right: 'auto'\n },\n end: {\n 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]: '100%'\n }\n});\nexport const useDrawerBaseClassNames = ({ position, size })=>{\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);\n};\n"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerBottomBaseStyles","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","position","size","baseStyles","bottomBaseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIiBA,aAAa;eAAbA;;IAKAC,mBAAmB;eAAnBA;;IA0DJC,uBAAuB;eAAvBA;;IAdAC,yBAAyB;eAAzBA;;;uBArD4B;4BAClB;AAGZ,MAAMH,gBAAgB;IAC7BI,eAAe;AACnB;AAGW,MAAMH,sBAAsB;IACnCI,UAAU;IACVC,OAAO,CAAA,IAAA,EAAON,cAAcI,aAAa,CAAA,CAAA,CAAG;IAC5CG,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;IAC/CC,OAAOF,kBAAM,CAACG,uBAAAA;AAClB;AACA;;CAEA,GAAI,MAAMC,kBAAe,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,OAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAL,QAAA;YAAA;YAAA;SAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAD,SAAA;IAAA;IAAAE,OAAA;QAAAF,SAAA;IAAA;IAAAG,MAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA4BrB,MAAMxC,4BAAyB,WAAA,GAAGkB,IAAAA,eAAA,EAAA;IAAAgB,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAD,SAAA;IAAA;IAAAE,OAAA;QAAAF,SAAA;IAAA;IAAAG,MAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAclC,MAAMxC,0BAA0BA,CAAC,EAAE0C,QAAQ,EAAEC,IAAAA,EAAM;IACtD,MAAMC,aAAa1B;IACnB,MAAM2B,mBAAmB5C;IACzB,OAAO6C,IAAAA,mBAAY,EAACF,UAAU,CAACF,SAAS,EAAEA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAAED,aAAa,YAAYE,UAAU,CAACD,KAAK;AACxI"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.10",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.11.
|
|
38
|
+
"@fluentui/react-dialog": "^9.11.10",
|
|
39
39
|
"@fluentui/react-jsx-runtime": "^9.0.42",
|
|
40
40
|
"@fluentui/react-motion": "^9.4.0",
|
|
41
41
|
"@fluentui/react-shared-contexts": "^9.20.0",
|
|
42
|
-
"@fluentui/react-tabster": "^9.22.
|
|
42
|
+
"@fluentui/react-tabster": "^9.22.4",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.19",
|
|
44
44
|
"@fluentui/react-utilities": "^9.18.13",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|