@fluentui/react-drawer 9.3.2 → 9.5.0
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 +102 -72
- package/dist/index.d.ts +19 -16
- package/lib/components/Drawer/Drawer.types.js.map +1 -1
- package/lib/components/Drawer/useDrawer.js +2 -2
- package/lib/components/Drawer/useDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/InlineDrawer.types.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js +25 -12
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerDialog.js +22 -0
- package/lib/components/OverlayDrawer/OverlayDrawerDialog.js.map +1 -0
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js +9 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawer.js +10 -10
- package/lib/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +3 -3
- package/lib/shared/DrawerBase.types.js.map +1 -1
- package/lib/shared/useDrawerBaseStyles.styles.js +18 -8
- package/lib/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Drawer/useDrawer.js +2 -2
- package/lib-commonjs/components/Drawer/useDrawer.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js +47 -39
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerDialog.js +28 -0
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerDialog.js.map +1 -0
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js +9 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js +9 -9
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +13 -13
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js +36 -28
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/package.json +10 -10
|
@@ -28,44 +28,31 @@ const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rkjj3x6",
|
|
|
28
28
|
]);
|
|
29
29
|
/**
|
|
30
30
|
* Styles for the root slot
|
|
31
|
-
*/ const
|
|
32
|
-
'1px',
|
|
33
|
-
'solid',
|
|
34
|
-
_reacttheme.tokens.colorNeutralBackground3
|
|
35
|
-
];
|
|
31
|
+
*/ const borderValue = `1px solid ${_reacttheme.tokens.colorNeutralBackground3}`;
|
|
36
32
|
const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
37
33
|
separatorStart: {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
"fjik90z"
|
|
45
|
-
],
|
|
46
|
-
h3c5rm: [
|
|
47
|
-
"fa8zu9y",
|
|
48
|
-
"f17e9lqh"
|
|
34
|
+
h3c5rm: 0,
|
|
35
|
+
vrafjx: 0,
|
|
36
|
+
Bekrc4i: 0,
|
|
37
|
+
u1mtju: [
|
|
38
|
+
"f1cxmi7i",
|
|
39
|
+
"f1j970fk"
|
|
49
40
|
]
|
|
50
41
|
},
|
|
51
42
|
separatorEnd: {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
"fcdblym"
|
|
59
|
-
],
|
|
60
|
-
zhjwy3: [
|
|
61
|
-
"f17e9lqh",
|
|
62
|
-
"fa8zu9y"
|
|
43
|
+
zhjwy3: 0,
|
|
44
|
+
wvpqe5: 0,
|
|
45
|
+
ibv6hh: 0,
|
|
46
|
+
B4g9neb: [
|
|
47
|
+
"f1j970fk",
|
|
48
|
+
"f1cxmi7i"
|
|
63
49
|
]
|
|
64
50
|
},
|
|
65
51
|
separatorBottom: {
|
|
66
|
-
|
|
67
|
-
icvyot:
|
|
68
|
-
|
|
52
|
+
g2u3we: 0,
|
|
53
|
+
icvyot: 0,
|
|
54
|
+
B4j52fo: 0,
|
|
55
|
+
i8vvqc: "f1n3kblk"
|
|
69
56
|
},
|
|
70
57
|
start: {
|
|
71
58
|
Bz10aip: "f1d8gkik"
|
|
@@ -80,15 +67,36 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
80
67
|
}
|
|
81
68
|
}, {
|
|
82
69
|
d: [
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
70
|
+
[
|
|
71
|
+
".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
|
|
72
|
+
{
|
|
73
|
+
p: -1
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
[
|
|
77
|
+
".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
|
|
78
|
+
{
|
|
79
|
+
p: -1
|
|
80
|
+
}
|
|
81
|
+
],
|
|
82
|
+
[
|
|
83
|
+
".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
|
|
84
|
+
{
|
|
85
|
+
p: -1
|
|
86
|
+
}
|
|
87
|
+
],
|
|
88
|
+
[
|
|
89
|
+
".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
|
|
90
|
+
{
|
|
91
|
+
p: -1
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
[
|
|
95
|
+
".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}",
|
|
96
|
+
{
|
|
97
|
+
p: -1
|
|
98
|
+
}
|
|
99
|
+
],
|
|
92
100
|
".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}",
|
|
93
101
|
".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}",
|
|
94
102
|
".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"rkjj3x6\", null, [\".rkjj3x6{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n separatorStart: {\n h3c5rm: 0,\n vrafjx: 0,\n Bekrc4i: 0,\n u1mtju: [\"f1cxmi7i\", \"f1j970fk\"]\n },\n separatorEnd: {\n zhjwy3: 0,\n wvpqe5: 0,\n ibv6hh: 0,\n B4g9neb: [\"f1j970fk\", \"f1cxmi7i\"]\n },\n separatorBottom: {\n g2u3we: 0,\n icvyot: 0,\n B4j52fo: 0,\n i8vvqc: \"f1n3kblk\"\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1h1g6jt\"\n },\n bottom: {\n Bz10aip: \"f1rdfgt8\",\n a9b677: \"fly5x3f\",\n Bqenvij: \"fub80nq\"\n }\n}, {\n d: [[\".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}\", {\n p: -1\n }], [\".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}\", {\n p: -1\n }], [\".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}\", {\n p: -1\n }], [\".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}\", {\n p: -1\n }], [\".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}\", {\n p: -1\n }], \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\", \".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}\", \".fly5x3f{width:100%;}\", \".fub80nq{height:var(--fui-Drawer--size);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f15rjlgw\",\n Es3by: \"f1blt7p\"\n },\n enter: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch (state.position) {\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = state => {\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n return state;\n};\n//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","borderValue","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","p","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAkFAC,8BAA8B;eAA9BA;;;uBAtFyC;4BAC/B;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0T;AACpY;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAEC,kBAAM,CAACC,uBAAuB,CAAC,CAAC;AACjE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAChDC,gBAAgB;QACdC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAC,cAAc;QACZC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;YAAC;YAAY;SAAW;IACnC;IACAC,iBAAiB;QACfC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;YAAC;YAAqE;gBACxEC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAoE;gBACvEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAoE;gBACvEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAqE;gBACxEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAmE;gBACtEA,GAAG,CAAC;YACN;SAAE;QAAE;QAA+E;QAAoE;QAAoE;QAAyB;KAA4C;AAClS;AACA,MAAMC,wBAAwB,WAAW,GAAExB,IAAAA,eAAQ,EAAC;IAClD,WAAW;QACTyB,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRR,SAAS;IACX;AACF,GAAG;IACDK,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AACA,SAASO,kBAAkBC,KAAK,EAAEC,UAAU;IAC1C,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IACA,OAAQH,MAAMI,QAAQ;QACpB,KAAK;YACH,OAAOH,WAAW9B,cAAc;QAClC,KAAK;YACH,OAAO8B,WAAWzB,YAAY;QAChC,KAAK;YACH,OAAOyB,WAAWpB,eAAe;QACnC;YACE,OAAOsB;IACX;AACF;AAIO,MAAMzC,iCAAiCsC,CAAAA;IAC5C,MAAMK,cAAczC;IACpB,MAAM0C,iBAAiBC,IAAAA,kDAAuB,EAACP;IAC/C,MAAMQ,aAAavC;IACnB,MAAMwC,mBAAmBC,IAAAA,uCAAmB,EAACV,MAAMW,MAAM,EAAEjB;IAC3DM,MAAMrC,IAAI,CAACiD,SAAS,GAAGC,IAAAA,mBAAY,EAACpD,uBAAuBE,IAAI,EAAE0C,aAAaC,gBAAgBP,kBAAkBC,OAAOQ,aAAaA,UAAU,CAACR,MAAMI,QAAQ,CAAC,EAAEK,kBAAkBT,MAAMrC,IAAI,CAACiD,SAAS;IACtM,OAAOZ;AACT,GACA,wDAAwD"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "OverlayDrawerDialog", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return OverlayDrawerDialog;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _reactdialog = require("@fluentui/react-dialog");
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
15
|
+
const renderOverlayDrawerDialog_unstable = (state, contextValues)=>{
|
|
16
|
+
const { content, trigger } = state;
|
|
17
|
+
return /*#__PURE__*/ _react.createElement(_reactdialog.DialogProvider, {
|
|
18
|
+
value: contextValues.dialog
|
|
19
|
+
}, /*#__PURE__*/ _react.createElement(_reactdialog.DialogSurfaceProvider, {
|
|
20
|
+
value: contextValues.dialogSurface
|
|
21
|
+
}, trigger, content));
|
|
22
|
+
};
|
|
23
|
+
const OverlayDrawerDialog = /*#__PURE__*/ _react.memo((props)=>{
|
|
24
|
+
const state = (0, _reactdialog.useDialog_unstable)(props);
|
|
25
|
+
const contextValues = (0, _reactdialog.useDialogContextValues_unstable)(state);
|
|
26
|
+
return renderOverlayDrawerDialog_unstable(state, contextValues);
|
|
27
|
+
});
|
|
28
|
+
OverlayDrawerDialog.displayName = 'OverlayDrawerDialog';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["OverlayDrawerDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider, useDialog_unstable, useDialogContextValues_unstable } from '@fluentui/react-dialog';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst renderOverlayDrawerDialog_unstable = (state, contextValues)=>{\n const { content, trigger } = state;\n return /*#__PURE__*/ React.createElement(DialogProvider, {\n value: contextValues.dialog\n }, /*#__PURE__*/ React.createElement(DialogSurfaceProvider, {\n value: contextValues.dialogSurface\n }, trigger, content));\n};\n/**\n * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.\n *\n * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.\n * @internal\n */ export const OverlayDrawerDialog = /*#__PURE__*/ React.memo((props)=>{\n const state = useDialog_unstable(props);\n const contextValues = useDialogContextValues_unstable(state);\n return renderOverlayDrawerDialog_unstable(state, contextValues);\n});\nOverlayDrawerDialog.displayName = 'OverlayDrawerDialog';\n"],"names":["OverlayDrawerDialog","renderOverlayDrawerDialog_unstable","state","contextValues","content","trigger","React","createElement","DialogProvider","value","dialog","DialogSurfaceProvider","dialogSurface","memo","props","useDialog_unstable","useDialogContextValues_unstable","displayName"],"mappings":";;;;+BAgBiBA;;;eAAAA;;;;iEAhBM;6BACoF;AAC3G,gEAAgE;AAChE,MAAMC,qCAAqC,CAACC,OAAOC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAC7B,OAAO,WAAW,GAAGI,OAAMC,aAAa,CAACC,2BAAc,EAAE;QACrDC,OAAON,cAAcO,MAAM;IAC/B,GAAG,WAAW,GAAGJ,OAAMC,aAAa,CAACI,kCAAqB,EAAE;QACxDF,OAAON,cAAcS,aAAa;IACtC,GAAGP,SAASD;AAChB;AAMW,MAAMJ,sBAAsB,WAAW,GAAGM,OAAMO,IAAI,CAAC,CAACC;IAC7D,MAAMZ,QAAQa,IAAAA,+BAAkB,EAACD;IACjC,MAAMX,gBAAgBa,IAAAA,4CAA+B,EAACd;IACtD,OAAOD,mCAAmCC,OAAOC;AACrD;AACAH,oBAAoBiB,WAAW,GAAG"}
|
|
@@ -13,7 +13,15 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactdialog = require("@fluentui/react-dialog");
|
|
14
14
|
const _useOverlayDrawerSurfaceStylesstyles = require("./useOverlayDrawerSurfaceStyles.styles");
|
|
15
15
|
const OverlayDrawerSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
|
-
const dialogSurfaceState = (0, _reactdialog.useDialogSurface_unstable)(
|
|
16
|
+
const dialogSurfaceState = (0, _reactdialog.useDialogSurface_unstable)({
|
|
17
|
+
...props,
|
|
18
|
+
/**
|
|
19
|
+
* Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
|
|
20
|
+
* We need to cast the ref to a `div` element type to not break Dialog's ref type.
|
|
21
|
+
*
|
|
22
|
+
* FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.
|
|
23
|
+
*/ as: props.as
|
|
24
|
+
}, ref);
|
|
17
25
|
const dialogSurfaceContextValues = (0, _reactdialog.useDialogSurfaceContextValues_unstable)(dialogSurfaceState);
|
|
18
26
|
(0, _useOverlayDrawerSurfaceStylesstyles.useOverlayDrawerSurfaceStyles_unstable)(dialogSurfaceState);
|
|
19
27
|
return (0, _reactdialog.renderDialogSurface_unstable)(dialogSurfaceState, dialogSurfaceContextValues);
|
package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverlayDrawerSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */ export const OverlayDrawerSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["OverlayDrawerSurface","React","forwardRef","props","ref","dialogSurfaceState","useDialogSurface_unstable","dialogSurfaceContextValues","useDialogSurfaceContextValues_unstable","useOverlayDrawerSurfaceStyles_unstable","renderDialogSurface_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;6BACyF;qDACzD;AAI5C,MAAMA,uBAAuB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,qBAAqBC,IAAAA,sCAAyB,
|
|
1
|
+
{"version":3,"sources":["OverlayDrawerSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */ export const OverlayDrawerSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const dialogSurfaceState = useDialogSurface_unstable({\n ...props,\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n *\n * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n */ as: props.as\n }, ref);\n const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["OverlayDrawerSurface","React","forwardRef","props","ref","dialogSurfaceState","useDialogSurface_unstable","as","dialogSurfaceContextValues","useDialogSurfaceContextValues_unstable","useOverlayDrawerSurfaceStyles_unstable","renderDialogSurface_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;6BACyF;qDACzD;AAI5C,MAAMA,uBAAuB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,qBAAqBC,IAAAA,sCAAyB,EAAC;QACjD,GAAGH,KAAK;QACR;;;;;OAKD,GAAGI,IAAIJ,MAAMI,EAAE;IAClB,GAAGH;IACH,MAAMI,6BAA6BC,IAAAA,mDAAsC,EAACJ;IAC1EK,IAAAA,2EAAsC,EAACL;IACvC,OAAOM,IAAAA,yCAA4B,EAACN,oBAAoBG;AAC5D;AACAR,qBAAqBY,WAAW,GAAG"}
|
|
@@ -11,30 +11,30 @@ Object.defineProperty(exports, "useOverlayDrawer_unstable", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const _reactdialog = require("@fluentui/react-dialog");
|
|
15
14
|
const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
16
15
|
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
|
|
16
|
+
const _OverlayDrawerDialog = require("./OverlayDrawerDialog");
|
|
17
17
|
const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
|
|
18
18
|
const useOverlayDrawer_unstable = (props, ref)=>{
|
|
19
19
|
const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
20
|
-
const { modalType = 'modal', inertTrapFocus,
|
|
20
|
+
const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
|
|
21
21
|
const motion = (0, _reactmotionpreview.useMotion)(open);
|
|
22
22
|
const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
|
|
23
23
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
24
24
|
const root = _reactutilities.slot.always({
|
|
25
25
|
...props,
|
|
26
|
+
ref: (0, _reactutilities.useMergedRefs)(ref, motion.ref),
|
|
26
27
|
backdrop: hasCustomBackdrop ? {
|
|
27
28
|
...backdropProps
|
|
28
29
|
} : null
|
|
29
30
|
}, {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
|
|
33
|
+
* We need to cast the ref to a `div` element type to not break Dialog's ref type.
|
|
34
|
+
*/ elementType: _OverlayDrawerSurface.OverlayDrawerSurface
|
|
34
35
|
});
|
|
35
36
|
const dialog = _reactutilities.slot.always({
|
|
36
37
|
open,
|
|
37
|
-
defaultOpen,
|
|
38
38
|
onOpenChange,
|
|
39
39
|
inertTrapFocus,
|
|
40
40
|
modalType,
|
|
@@ -43,12 +43,12 @@ const useOverlayDrawer_unstable = (props, ref)=>{
|
|
|
43
43
|
* but it's required by DialogProps
|
|
44
44
|
*/ children: null
|
|
45
45
|
}, {
|
|
46
|
-
elementType:
|
|
46
|
+
elementType: _OverlayDrawerDialog.OverlayDrawerDialog
|
|
47
47
|
});
|
|
48
48
|
return {
|
|
49
49
|
components: {
|
|
50
50
|
root: _OverlayDrawerSurface.OverlayDrawerSurface,
|
|
51
|
-
dialog:
|
|
51
|
+
dialog: _OverlayDrawerDialog.OverlayDrawerDialog
|
|
52
52
|
},
|
|
53
53
|
root,
|
|
54
54
|
dialog,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { OverlayDrawerDialog } from './OverlayDrawerDialog';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n */ export const useOverlayDrawer_unstable = (props, ref)=>{\n const { open, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n const motion = useMotion(open);\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n const root = slot.always({\n ...props,\n ref: useMergedRefs(ref, motion.ref),\n backdrop: hasCustomBackdrop ? {\n ...backdropProps\n } : null\n }, {\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n */ elementType: OverlayDrawerSurface\n });\n const dialog = slot.always({\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n /**\n * children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */ children: null\n }, {\n elementType: OverlayDrawerDialog\n });\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: OverlayDrawerDialog\n },\n root,\n dialog,\n size,\n position,\n motion\n };\n};\n"],"names":["useOverlayDrawer_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","onOpenChange","motion","useMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","useMergedRefs","elementType","OverlayDrawerSurface","dialog","children","OverlayDrawerDialog","components"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;oCACV;uCACY;qCACF;sCACC;AAS1B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGR;IAC9D,MAAMS,SAASC,IAAAA,6BAAS,EAACR;IACzB,MAAMS,gBAAgBC,oBAAI,CAACC,gBAAgB,CAACb,MAAMc,QAAQ;IAC1D,MAAMC,oBAAoBT,cAAc,eAAeK,kBAAkB;IACzE,MAAMK,OAAOJ,oBAAI,CAACK,MAAM,CAAC;QACrB,GAAGjB,KAAK;QACRC,KAAKiB,IAAAA,6BAAa,EAACjB,KAAKQ,OAAOR,GAAG;QAClCa,UAAUC,oBAAoB;YAC1B,GAAGJ,aAAa;QACpB,IAAI;IACR,GAAG;QACC;;;OAGD,GAAGQ,aAAaC,0CAAoB;IACvC;IACA,MAAMC,SAAST,oBAAI,CAACK,MAAM,CAAC;QACvBf;QACAM;QACAD;QACAD;QACA;;;OAGD,GAAGgB,UAAU;IAChB,GAAG;QACCH,aAAaI,wCAAmB;IACpC;IACA,OAAO;QACHC,YAAY;YACRR,MAAMI,0CAAoB;YAC1BC,QAAQE,wCAAmB;QAC/B;QACAP;QACAK;QACAlB;QACAC;QACAK;IACJ;AACJ"}
|
|
@@ -27,22 +27,22 @@ const overlayDrawerClassNames = {
|
|
|
27
27
|
};
|
|
28
28
|
/**
|
|
29
29
|
* Styles for the root slot
|
|
30
|
-
*/ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("
|
|
30
|
+
*/ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r7dfyj8", "rmx02j7", {
|
|
31
31
|
r: [
|
|
32
|
-
".
|
|
33
|
-
".
|
|
34
|
-
".
|
|
35
|
-
".
|
|
36
|
-
".
|
|
37
|
-
".
|
|
38
|
-
".
|
|
39
|
-
".
|
|
40
|
-
".
|
|
41
|
-
".
|
|
32
|
+
".r7dfyj8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}",
|
|
33
|
+
".r7dfyj8:focus{outline-style:none;}",
|
|
34
|
+
".r7dfyj8:focus-visible{outline-style:none;}",
|
|
35
|
+
".r7dfyj8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
36
|
+
".r7dfyj8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
37
|
+
".rmx02j7{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}",
|
|
38
|
+
".rmx02j7:focus{outline-style:none;}",
|
|
39
|
+
".rmx02j7:focus-visible{outline-style:none;}",
|
|
40
|
+
".rmx02j7[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
41
|
+
".rmx02j7[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
42
42
|
],
|
|
43
43
|
s: [
|
|
44
|
-
"@media (forced-colors: active){.
|
|
45
|
-
"@media (forced-colors: active){.
|
|
44
|
+
"@media (forced-colors: active){.r7dfyj8[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){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
46
46
|
]
|
|
47
47
|
});
|
|
48
48
|
const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r7dfyj8\", \"rmx02j7\", {\n r: [\".r7dfyj8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".r7dfyj8:focus{outline-style:none;}\", \".r7dfyj8:focus-visible{outline-style:none;}\", \".r7dfyj8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r7dfyj8[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rmx02j7{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".rmx02j7:focus{outline-style:none;}\", \".rmx02j7:focus-visible{outline-style:none;}\", \".rmx02j7[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rmx02j7[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r7dfyj8[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){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1g0pcr8\"\n },\n bottom: {\n Bz10aip: \"fip488n\",\n Bhzewxz: \"f198g47y\",\n Bqenvij: \"fub80nq\",\n a9b677: \"fr97h3j\"\n }\n}, {\n d: [\".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".fip488n{transform:translate3D(0, calc(var(--fui-Drawer--size) * 1), 0);}\", \".f198g47y{top:auto;}\", \".fub80nq{height:var(--fui-Drawer--size);}\", \".fr97h3j{width:100vw;}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n E5pizo: \"ff88big\",\n Bmy1vo4: \"f1neo61\",\n Es3by: \"f1ytgekk\"\n },\n enter: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\",\n E5pizo: \"f10nrhrw\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".ff88big{box-shadow:0px var(--colorTransparentBackground);}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f13u1uyl\",\n Bkqvd7p: \"f17wnm97\",\n Es3by: \"f1gqqdtu\"\n },\n enter: {\n abs64n: \"f5p0z4x\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = state => {\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const durationStyles = useDrawerDurationStyles();\n const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useOverlayDrawerStyles.styles.js.map"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","durationStyles","useDrawerDurationStyles","drawerMotionClassNames","useMotionClassNames","motion","backdropMotionClassNames","className","mergeClasses","position","size"],"mappings":";;;;;;;;;;;IAMaA,uBAAuB;eAAvBA;;IA6DAC,+BAA+B;eAA/BA;;;;iEAnEU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,WAAW;IAC5EC,GAAG;QAAC;QAAuU;QAAuC;QAA+C;QAAgK;QAA8Q;QAAuU;QAAuC;QAA+C;QAAgK;KAA6Q;IACzpDC,GAAG;QAAC;QAA+L;KAA8L;AACnY;AACA,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA+E;QAA8E;QAA6E;QAAwB;QAA6C;KAAyB;AAC9U;AACA,MAAMC,wBAAwB,WAAW,GAAET,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTU,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;QACRR,SAAS;QACTS,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAwB;QAA+D;QAA+D;QAAwD;QAAwB;QAA6C;KAAyC;AAClU;AACA;;CAEC,GACD,MAAMO,0BAA0B,WAAW,GAAEf,IAAAA,gBAAQ,EAAC;IACpD,WAAW;QACTU,QAAQ;QACRE,SAAS;QACTI,SAAS;QACTH,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;IACV;AACF,GAAG;IACDF,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMhB,kCAAkCyB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAczB;IACpB,MAAM0B,aAAatB;IACnB,MAAMuB,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMC,yBAAyBC,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEjB;IACjE,MAAMkB,2BAA2BF,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEX;IACnE,MAAMrB,WAAWuB,MAAMxB,IAAI,CAACC,QAAQ;IACpCuB,MAAMxB,IAAI,CAACmC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBE,IAAI,EAAEyB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMxB,IAAI,CAACmC,SAAS;IACvK,IAAIlC,UAAU;QACZA,SAASkC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBG,QAAQ,EAAEiC,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAErC,SAASkC,SAAS;IAC9I;IACA,OAAOX;AACT,GACA,yDAAyD"}
|
|
@@ -57,17 +57,12 @@ const drawerDefaultStyles = {
|
|
|
57
57
|
Hwfdqs: "f5e8c63"
|
|
58
58
|
},
|
|
59
59
|
start: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"
|
|
66
|
-
"fjik90z"
|
|
67
|
-
],
|
|
68
|
-
h3c5rm: [
|
|
69
|
-
"f1gn591s",
|
|
70
|
-
"fjscplz"
|
|
60
|
+
h3c5rm: 0,
|
|
61
|
+
vrafjx: 0,
|
|
62
|
+
Bekrc4i: 0,
|
|
63
|
+
u1mtju: [
|
|
64
|
+
"f1xteiwb",
|
|
65
|
+
"fsqykmd"
|
|
71
66
|
],
|
|
72
67
|
oyh7mz: [
|
|
73
68
|
"f1vgc2s3",
|
|
@@ -79,17 +74,12 @@ const drawerDefaultStyles = {
|
|
|
79
74
|
]
|
|
80
75
|
},
|
|
81
76
|
end: {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"
|
|
88
|
-
"fcdblym"
|
|
89
|
-
],
|
|
90
|
-
zhjwy3: [
|
|
91
|
-
"fjscplz",
|
|
92
|
-
"f1gn591s"
|
|
77
|
+
zhjwy3: 0,
|
|
78
|
+
wvpqe5: 0,
|
|
79
|
+
ibv6hh: 0,
|
|
80
|
+
B4g9neb: [
|
|
81
|
+
"fsqykmd",
|
|
82
|
+
"f1xteiwb"
|
|
93
83
|
],
|
|
94
84
|
j35jbq: [
|
|
95
85
|
"f1e31b4d",
|
|
@@ -120,16 +110,34 @@ const drawerDefaultStyles = {
|
|
|
120
110
|
d: [
|
|
121
111
|
".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
|
|
122
112
|
".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}",
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
113
|
+
[
|
|
114
|
+
".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
|
|
115
|
+
{
|
|
116
|
+
p: -1
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
[
|
|
120
|
+
".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
|
|
121
|
+
{
|
|
122
|
+
p: -1
|
|
123
|
+
}
|
|
124
|
+
],
|
|
129
125
|
".f1vgc2s3{left:0;}",
|
|
130
126
|
".f1e31b4d{right:0;}",
|
|
131
127
|
".fvfyk4{right:auto;}",
|
|
132
128
|
".frppm18{left:auto;}",
|
|
129
|
+
[
|
|
130
|
+
".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
|
|
131
|
+
{
|
|
132
|
+
p: -1
|
|
133
|
+
}
|
|
134
|
+
],
|
|
135
|
+
[
|
|
136
|
+
".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
|
|
137
|
+
{
|
|
138
|
+
p: -1
|
|
139
|
+
}
|
|
140
|
+
],
|
|
133
141
|
".f1yab3r1{bottom:0;}",
|
|
134
142
|
".f198g47y{top:auto;}",
|
|
135
143
|
".f1exhnwo{--fui-Drawer--size:320px;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles = {\n overflow: 'hidden',\n width: `var(${drawerCSSVars.drawerSizeVar})`,\n maxWidth: '100vw',\n height: 'auto',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = /*#__PURE__*/__styles({\n entering: {\n Bkqvd7p: \"f18ad807\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n reducedMotion: {\n Hwfdqs: \"f5e8c63\"\n },\n start: {\n h3c5rm: 0,\n vrafjx: 0,\n Bekrc4i: 0,\n u1mtju: [\"f1xteiwb\", \"fsqykmd\"],\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n j35jbq: [\"fvfyk4\", \"frppm18\"]\n },\n end: {\n zhjwy3: 0,\n wvpqe5: 0,\n ibv6hh: 0,\n B4g9neb: [\"fsqykmd\", \"f1xteiwb\"],\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n oyh7mz: [\"frppm18\", \"fvfyk4\"]\n },\n bottom: {\n B5kzvoi: \"f1yab3r1\",\n Bhzewxz: \"f198g47y\"\n },\n small: {\n Bjr0ffy: \"f1exhnwo\"\n },\n medium: {\n Bjr0ffy: \"fqofjzu\"\n },\n large: {\n Bjr0ffy: \"fce6y3m\"\n },\n full: {\n Bjr0ffy: \"fsdmzs6\"\n }\n}, {\n d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", [\".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n p: -1\n }], [\".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n p: -1\n }], \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", [\".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n p: -1\n }], [\".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n p: -1\n }], \".f1yab3r1{bottom:0;}\", \".f198g47y{top:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }]]\n});\nexport const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({\n small: {\n Bjr0ffy: \"f1exhnwo\"\n },\n medium: {\n Bjr0ffy: \"fqofjzu\"\n },\n large: {\n Bjr0ffy: \"fce6y3m\"\n },\n full: {\n Bjr0ffy: \"fno8cgj\"\n }\n}, {\n d: [\".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fno8cgj{--fui-Drawer--size:100vh;}\"]\n});\nexport const useDrawerDurationStyles = /*#__PURE__*/__styles({\n small: {\n B3o57yi: \"fc397y7\"\n },\n medium: {\n B3o57yi: \"f78771\"\n },\n large: {\n B3o57yi: \"f9ymmep\"\n },\n full: {\n B3o57yi: \"f1loko9l\"\n }\n}, {\n d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n position,\n size,\n motion\n}) => {\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n const durationStyles = useDrawerDurationStyles();\n return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBottomBaseStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","m","B3o57yi","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","mergeClasses","type"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
"just": "just-scripts",
|
|
21
21
|
"lint": "just-scripts lint",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
|
-
"type-check": "
|
|
23
|
+
"type-check": "just-scripts type-check",
|
|
24
24
|
"generate-api": "just-scripts generate-api",
|
|
25
|
-
"storybook": "
|
|
26
|
-
"start": "yarn storybook"
|
|
27
|
-
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
|
25
|
+
"storybook": "yarn --cwd ../stories storybook",
|
|
26
|
+
"start": "yarn storybook"
|
|
28
27
|
},
|
|
29
28
|
"devDependencies": {
|
|
29
|
+
"@fluentui/react-provider": "*",
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
32
|
"@fluentui/react-conformance-griffel": "*",
|
|
@@ -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.
|
|
38
|
+
"@fluentui/react-dialog": "^9.11.0",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.39",
|
|
40
|
+
"@fluentui/react-motion-preview": "^0.5.22",
|
|
41
41
|
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
42
|
-
"@fluentui/react-tabster": "^9.21.
|
|
42
|
+
"@fluentui/react-tabster": "^9.21.5",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.19",
|
|
44
|
-
"@fluentui/react-utilities": "^9.18.
|
|
44
|
+
"@fluentui/react-utilities": "^9.18.10",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|