@fluentui/react-drawer 9.0.3 → 9.0.5
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 -6
- package/dist/index.d.ts +2 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map +1 -1
- 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,20 +1,49 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 18 Dec 2023 14:36:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.5)
|
|
8
|
+
|
|
9
|
+
Mon, 18 Dec 2023 14:36:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.4..@fluentui/react-drawer_v9.0.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-dialog to v9.9.1 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.22 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
16
|
+
- Bump @fluentui/react-motion-preview to v0.5.5 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.16.0 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.15.4 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.4)
|
|
22
|
+
|
|
23
|
+
Thu, 14 Dec 2023 09:58:43 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.3..@fluentui/react-drawer_v9.0.4)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- fix: OverlayDrawer accepts mountNode in types ([PR #29871](https://github.com/microsoft/fluentui/pull/29871) by sarah.higley@microsoft.com)
|
|
29
|
+
- Bump @fluentui/react-dialog to v9.9.0 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
30
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.21 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
31
|
+
- Bump @fluentui/react-motion-preview to v0.5.4 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.15.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
35
|
+
|
|
7
36
|
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.3)
|
|
8
37
|
|
|
9
|
-
Thu, 30 Nov 2023 13:
|
|
38
|
+
Thu, 30 Nov 2023 13:42:08 GMT
|
|
10
39
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.2..@fluentui/react-drawer_v9.0.3)
|
|
11
40
|
|
|
12
41
|
### Patches
|
|
13
42
|
|
|
14
|
-
- Bump @fluentui/react-dialog to v9.8.7 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #
|
|
16
|
-
- Bump @fluentui/react-motion-preview to v0.5.3 ([PR #
|
|
17
|
-
- Bump @fluentui/react-tabster to v9.15.0 ([PR #
|
|
43
|
+
- Bump @fluentui/react-dialog to v9.8.7 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
|
|
44
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
|
|
45
|
+
- Bump @fluentui/react-motion-preview to v0.5.3 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
|
|
46
|
+
- Bump @fluentui/react-tabster to v9.15.0 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
|
|
18
47
|
|
|
19
48
|
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.2)
|
|
20
49
|
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
4
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
5
|
import type { DialogProps } from '@fluentui/react-dialog';
|
|
6
|
+
import type { DialogSurfaceProps } from '@fluentui/react-dialog';
|
|
6
7
|
import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
|
|
7
8
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
8
9
|
import * as React_2 from 'react';
|
|
@@ -287,7 +288,7 @@ export declare type OverlayDrawerState = Omit<ComponentState<OverlayDrawerIntern
|
|
|
287
288
|
/**
|
|
288
289
|
* OverlayDrawerSurface Props
|
|
289
290
|
*/
|
|
290
|
-
declare type OverlayDrawerSurfaceProps =
|
|
291
|
+
declare type OverlayDrawerSurfaceProps = DialogSurfaceProps;
|
|
291
292
|
|
|
292
293
|
/**
|
|
293
294
|
* OverlayDrawerSurface slots
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceSlots, DialogSurfaceState } from '@fluentui/react-dialog';\nimport type {
|
|
1
|
+
{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState } from '@fluentui/react-dialog';\nimport type { ComponentState } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = DialogSurfaceSlots;\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = DialogSurfaceProps;\n\n/**\n * State used in rendering OverlayDrawerSurface\n */\nexport type OverlayDrawerSurfaceState = ComponentState<OverlayDrawerSurfaceSlots> & DialogSurfaceState;\n"],"names":[],"mappings":"AAAA,WAgBuG"}
|
|
@@ -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.5",
|
|
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.13.
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
38
|
+
"@fluentui/react-dialog": "^9.9.1",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.22",
|
|
40
|
+
"@fluentui/react-motion-preview": "^0.5.5",
|
|
41
|
+
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
42
|
+
"@fluentui/react-tabster": "^9.16.0",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.16",
|
|
44
|
-
"@fluentui/react-utilities": "^9.15.
|
|
44
|
+
"@fluentui/react-utilities": "^9.15.4",
|
|
45
45
|
"@griffel/react": "^1.5.14",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|