@fluentui/react-drawer 9.0.4 → 9.0.6
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 +35 -8
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +4 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +18 -12
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,50 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 03 Jan 2024 09:22:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.6)
|
|
8
|
+
|
|
9
|
+
Wed, 03 Jan 2024 09:22:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.5..@fluentui/react-drawer_v9.0.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-dialog to v9.9.2 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.23 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
|
|
16
|
+
- Bump @fluentui/react-motion-preview to v0.5.6 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.16.1 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.15.5 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.5)
|
|
21
|
+
|
|
22
|
+
Mon, 18 Dec 2023 14:40:46 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.4..@fluentui/react-drawer_v9.0.5)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-dialog to v9.9.1 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
|
28
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.22 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
|
29
|
+
- Bump @fluentui/react-motion-preview to v0.5.5 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
|
30
|
+
- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.16.0 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.15.4 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.4)
|
|
8
35
|
|
|
9
|
-
Thu, 14 Dec 2023 09:
|
|
36
|
+
Thu, 14 Dec 2023 09:58:43 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.3..@fluentui/react-drawer_v9.0.4)
|
|
11
38
|
|
|
12
39
|
### Patches
|
|
13
40
|
|
|
14
41
|
- fix: OverlayDrawer accepts mountNode in types ([PR #29871](https://github.com/microsoft/fluentui/pull/29871) by sarah.higley@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-dialog to v9.9.0 ([
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.21 ([
|
|
17
|
-
- Bump @fluentui/react-motion-preview to v0.5.4 ([
|
|
18
|
-
- Bump @fluentui/react-shared-contexts to v9.13.1 ([
|
|
19
|
-
- Bump @fluentui/react-tabster to v9.15.1 ([
|
|
20
|
-
- Bump @fluentui/react-utilities to v9.15.3 ([
|
|
42
|
+
- Bump @fluentui/react-dialog to v9.9.0 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
43
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.21 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
44
|
+
- Bump @fluentui/react-motion-preview to v0.5.4 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
45
|
+
- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
46
|
+
- Bump @fluentui/react-tabster to v9.15.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
47
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
21
48
|
|
|
22
49
|
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.3)
|
|
23
50
|
|
|
@@ -11,7 +11,10 @@ export const overlayDrawerClassNames = {
|
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
|
-
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("
|
|
14
|
+
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1vxc6jp", "r1uky7bi", {
|
|
15
|
+
r: [".r1vxc6jp{overflow-x:hidden;overflow-y: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;}", ".r1vxc6jp:focus{outline-style:none;}", ".r1vxc6jp:focus-visible{outline-style:none;}", ".r1vxc6jp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1vxc6jp[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);}", ".r1uky7bi{overflow-x:hidden;overflow-y: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;}", ".r1uky7bi:focus{outline-style:none;}", ".r1uky7bi:focus-visible{outline-style:none;}", ".r1uky7bi[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1uky7bi[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){.r1vxc6jp[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){.r1uky7bi[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
|
|
17
|
+
});
|
|
15
18
|
const useDrawerRootStyles = /*#__PURE__*/__styles({
|
|
16
19
|
start: {
|
|
17
20
|
Bz10aip: "f1d8gkik"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","useDrawerRootStyles","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n transitionProperty: 'transform, box-shadow, opacity',\n willChange: 'transform, box-shadow, opacity'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)',\n boxShadow: tokens.shadow64\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n willChange: 'opacity'\n },\n enter: {\n opacity: 1\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const durationStyles = useDrawerDurationStyles();\n const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,
|
|
1
|
+
{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n transitionProperty: 'transform, box-shadow, opacity',\n willChange: 'transform, box-shadow, opacity'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)',\n boxShadow: tokens.shadow64\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n willChange: 'opacity'\n },\n enter: {\n opacity: 1\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const durationStyles = useDrawerDurationStyles();\n const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGf,QAAA;EAAAgB,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAO3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGpB,QAAA;EAAA;IAAAqB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAJ,OAAA;IAAAK,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAG1B,QAAA;EAAA;IAAAqB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGxB,uBAAuB,CAACuB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGnB,oBAAoB,CAAC,CAAC;EAC1C,MAAMoB,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,cAAc,GAAG1B,uBAAuB,CAAC,CAAC;EAChD,MAAM2B,sBAAsB,GAAG1B,mBAAmB,CAACqB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAG5B,mBAAmB,CAACqB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMf,QAAQ,GAAGkB,KAAK,CAACnB,IAAI,CAACC,QAAQ;EACpCkB,KAAK,CAACnB,IAAI,CAAC2B,SAAS,GAAGpC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEoB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACnB,IAAI,CAAC2B,SAAS,CAAC;EACxK,IAAI1B,QAAQ,EAAE;IACVA,QAAQ,CAAC0B,SAAS,GAAGpC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEyB,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAE5B,QAAQ,CAAC0B,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC"}
|
|
@@ -27,18 +27,24 @@ const overlayDrawerClassNames = {
|
|
|
27
27
|
};
|
|
28
28
|
/**
|
|
29
29
|
* Styles for the root slot
|
|
30
|
-
*/ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
]);
|
|
30
|
+
*/ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r1vxc6jp", "r1uky7bi", {
|
|
31
|
+
r: [
|
|
32
|
+
".r1vxc6jp{overflow-x:hidden;overflow-y: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
|
+
".r1vxc6jp:focus{outline-style:none;}",
|
|
34
|
+
".r1vxc6jp:focus-visible{outline-style:none;}",
|
|
35
|
+
".r1vxc6jp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
36
|
+
".r1vxc6jp[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
|
+
".r1uky7bi{overflow-x:hidden;overflow-y: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
|
+
".r1uky7bi:focus{outline-style:none;}",
|
|
39
|
+
".r1uky7bi:focus-visible{outline-style:none;}",
|
|
40
|
+
".r1uky7bi[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
41
|
+
".r1uky7bi[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
|
+
],
|
|
43
|
+
s: [
|
|
44
|
+
"@media (forced-colors: active){.r1vxc6jp[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){.r1uky7bi[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
46
|
+
]
|
|
47
|
+
});
|
|
42
48
|
const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
43
49
|
start: {
|
|
44
50
|
Bz10aip: "f1d8gkik"
|
|
@@ -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(\"r1vxc6jp\", \"r1uky7bi\", {\n r: [\".r1vxc6jp{overflow-x:hidden;overflow-y: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;}\", \".r1vxc6jp:focus{outline-style:none;}\", \".r1vxc6jp:focus-visible{outline-style:none;}\", \".r1vxc6jp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1vxc6jp[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);}\", \".r1uky7bi{overflow-x:hidden;overflow-y: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;}\", \".r1uky7bi:focus{outline-style:none;}\", \".r1uky7bi:focus-visible{outline-style:none;}\", \".r1uky7bi[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1uky7bi[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){.r1vxc6jp[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){.r1uky7bi[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}, {\n d: [\".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\"]\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","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;;IAuDAC,+BAA+B;eAA/BA;;;;iEA7DU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,YAAY,YAAY;IAC9EC,GAAG;QAAC;QAA4V;QAAwC;QAAgD;QAAiK;QAAmvB;QAA4V;QAAwC;QAAgD;QAAiK;KAAkvB;IACnpFC,GAAG;QAAC;QAAgM;KAA+L;AACrY;AACA,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAA+E;KAA6E;AAClK;AACA,MAAMC,wBAAwB,WAAW,GAAEL,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTM,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;QACRJ,SAAS;QACTK,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAwB;QAA+D;QAA+D;QAAwD;QAAwB;QAA6C;KAAyC;AAClU;AACA;;CAEC,GACD,MAAMO,0BAA0B,WAAW,GAAEX,IAAAA,gBAAQ,EAAC;IACpD,WAAW;QACTM,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,MAAMZ,kCAAkCqB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAcrB;IACpB,MAAMsB,aAAalB;IACnB,MAAMmB,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMC,yBAAyBC,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEjB;IACjE,MAAMkB,2BAA2BF,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEX;IACnE,MAAMjB,WAAWmB,MAAMpB,IAAI,CAACC,QAAQ;IACpCmB,MAAMpB,IAAI,CAAC+B,SAAS,GAAGC,IAAAA,oBAAY,EAAClC,wBAAwBE,IAAI,EAAEqB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMpB,IAAI,CAAC+B,SAAS;IACvK,IAAI9B,UAAU;QACZA,SAAS8B,SAAS,GAAGC,IAAAA,oBAAY,EAAClC,wBAAwBG,QAAQ,EAAE6B,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAEjC,SAAS8B,SAAS;IAC9I;IACA,OAAOX;AACT,GACA,yDAAyD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.6",
|
|
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.9.
|
|
39
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
40
|
-
"@fluentui/react-motion-preview": "^0.5.
|
|
41
|
-
"@fluentui/react-shared-contexts": "^9.13.
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
38
|
+
"@fluentui/react-dialog": "^9.9.2",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.23",
|
|
40
|
+
"@fluentui/react-motion-preview": "^0.5.6",
|
|
41
|
+
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
42
|
+
"@fluentui/react-tabster": "^9.16.1",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.16",
|
|
44
|
-
"@fluentui/react-utilities": "^9.15.
|
|
44
|
+
"@fluentui/react-utilities": "^9.15.5",
|
|
45
45
|
"@griffel/react": "^1.5.14",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|