@fluentui/react-drawer 9.5.6 → 9.5.8
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 +21 -2
- package/dist/index.d.ts +22 -8
- package/lib/components/Drawer/Drawer.types.js.map +1 -1
- package/lib/components/Drawer/useDrawer.js +8 -6
- package/lib/components/Drawer/useDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/InlineDrawer.types.js.map +1 -1
- package/lib/components/InlineDrawer/renderInlineDrawer.js +3 -4
- package/lib/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawer.js +31 -9
- package/lib/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js +4 -24
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +0 -4
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/renderOverlayDrawer.js +0 -3
- package/lib/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawer.js +24 -10
- package/lib/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +6 -47
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib/e2e/DrawerShared.js.map +1 -1
- package/lib/shared/DrawerBase.types.js.map +1 -1
- package/lib/shared/drawerMotionUtils.js +24 -0
- package/lib/shared/drawerMotionUtils.js.map +1 -0
- package/lib/shared/drawerMotions.js +112 -0
- package/lib/shared/drawerMotions.js.map +1 -0
- package/lib/shared/useDrawerBaseStyles.styles.js +4 -34
- package/lib/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Drawer/Drawer.types.js.map +1 -1
- package/lib-commonjs/components/Drawer/useDrawer.js +8 -6
- package/lib-commonjs/components/Drawer/useDrawer.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/InlineDrawer.types.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js +3 -4
- package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js +31 -9
- package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js +3 -32
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +3 -15
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js +0 -3
- package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js +24 -10
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +4 -60
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/e2e/DrawerShared.js.map +1 -1
- package/lib-commonjs/shared/DrawerBase.types.js.map +1 -1
- package/lib-commonjs/shared/drawerMotionUtils.js +32 -0
- package/lib-commonjs/shared/drawerMotionUtils.js.map +1 -0
- package/lib-commonjs/shared/drawerMotions.js +127 -0
- package/lib-commonjs/shared/drawerMotions.js.map +1 -0
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js +2 -46
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/package.json +3 -3
- package/lib/components/OverlayDrawer/OverlayDrawerDialog.js +0 -22
- package/lib/components/OverlayDrawer/OverlayDrawerDialog.js.map +0 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerDialog.js +0 -28
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerDialog.js.map +0 -1
|
@@ -19,7 +19,6 @@ _export(exports, {
|
|
|
19
19
|
const _react = require("@griffel/react");
|
|
20
20
|
const _reacttheme = require("@fluentui/react-theme");
|
|
21
21
|
const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
|
|
22
|
-
const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
23
22
|
const inlineDrawerClassNames = {
|
|
24
23
|
root: 'fui-InlineDrawer'
|
|
25
24
|
};
|
|
@@ -54,14 +53,9 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
54
53
|
B4j52fo: 0,
|
|
55
54
|
i8vvqc: "f1n3kblk"
|
|
56
55
|
},
|
|
57
|
-
start: {
|
|
58
|
-
|
|
59
|
-
},
|
|
60
|
-
end: {
|
|
61
|
-
Bz10aip: "f1h1g6jt"
|
|
62
|
-
},
|
|
56
|
+
start: {},
|
|
57
|
+
end: {},
|
|
63
58
|
bottom: {
|
|
64
|
-
Bz10aip: "f1rdfgt8",
|
|
65
59
|
a9b677: "fly5x3f",
|
|
66
60
|
Bqenvij: "fub80nq"
|
|
67
61
|
}
|
|
@@ -97,32 +91,10 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
97
91
|
p: -1
|
|
98
92
|
}
|
|
99
93
|
],
|
|
100
|
-
".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}",
|
|
101
|
-
".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}",
|
|
102
|
-
".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}",
|
|
103
94
|
".fly5x3f{width:100%;}",
|
|
104
95
|
".fub80nq{height:var(--fui-Drawer--size);}"
|
|
105
96
|
]
|
|
106
97
|
});
|
|
107
|
-
const useDrawerMotionStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
108
|
-
"default": {
|
|
109
|
-
abs64n: "fk73vx1",
|
|
110
|
-
Bmy1vo4: "f15rjlgw",
|
|
111
|
-
Es3by: "f1blt7p"
|
|
112
|
-
},
|
|
113
|
-
enter: {
|
|
114
|
-
abs64n: "f5p0z4x",
|
|
115
|
-
Bz10aip: "f87uvqx"
|
|
116
|
-
}
|
|
117
|
-
}, {
|
|
118
|
-
d: [
|
|
119
|
-
".fk73vx1{opacity:0;}",
|
|
120
|
-
".f15rjlgw{transition-property:opacity,transform;}",
|
|
121
|
-
".f1blt7p{will-change:opacity,transform;}",
|
|
122
|
-
".f5p0z4x{opacity:1;}",
|
|
123
|
-
".f87uvqx{transform:translate3D(0, 0, 0);}"
|
|
124
|
-
]
|
|
125
|
-
});
|
|
126
98
|
function getSeparatorClass(state, classNames) {
|
|
127
99
|
if (!state.separator) {
|
|
128
100
|
return undefined;
|
|
@@ -143,7 +115,6 @@ const useInlineDrawerStyles_unstable = (state)=>{
|
|
|
143
115
|
const resetStyles = useDrawerResetStyles();
|
|
144
116
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
145
117
|
const rootStyles = useDrawerRootStyles();
|
|
146
|
-
|
|
147
|
-
state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);
|
|
118
|
+
state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
|
|
148
119
|
return state;
|
|
149
120
|
}; //# sourceMappingURL=useInlineDrawerStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\
|
|
1
|
+
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n borderRight: borderValue\n },\n separatorEnd: {\n borderLeft: borderValue\n },\n separatorBottom: {\n borderTop: borderValue\n },\n /* Positioning */ start: {},\n end: {},\n bottom: {\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);\n return state;\n};\n"],"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","end","bottom","a9b677","Bqenvij","d","p","getSeparatorClass","state","classNames","separator","undefined","position","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IA4CIC,8BAA8B;eAA9BA;;;uBA/CyC;4BACnC;2CACqD;AACrE,MAAMD,yBAAyB;IAClCE,MAAM;AACV;AACA,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B;AACD;;CAEA,GAAI,MAAMC,cAAc,CAAA,UAAA,EAAaC,kBAAM,CAACC,uBAAuB,CAAA,CAAE;AACrE,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,gBAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,cAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA,CAAA;IAAAC,KAAA,CAAA;IAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA;AAiB5B,SAASC,kBAAkBC,KAAK,EAAEC,UAAU;IACxC,IAAI,CAACD,MAAME,SAAS,EAAE;QAClB,OAAOC;IACX;IACA,OAAOH,MAAMI,QAAQ;QACjB,KAAK;YACD,OAAOH,WAAWxB,cAAc;QACpC,KAAK;YACD,OAAOwB,WAAWnB,YAAY;QAClC,KAAK;YACD,OAAOmB,WAAWd,eAAe;QACrC;YACI,OAAOgB;IACf;AACJ;AAGW,MAAMnC,iCAAkCgC,CAAAA;IAC/C;IACA,MAAMK,cAAcnC;IACpB,MAAMoC,iBAAiBC,IAAAA,kDAAuB,EAACP;IAC/C,MAAMQ,aAAajC;IACnByB,MAAM/B,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,uBAAuBE,IAAI,EAAEoC,aAAaC,gBAAgBP,kBAAkBC,OAAOQ,aAAaA,UAAU,CAACR,MAAMI,QAAQ,CAAC,EAAEJ,MAAM/B,IAAI,CAACwC,SAAS;IACpL,OAAOT;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = OverlayDrawerSlots & {\n /**\n * Slot for the dialog component that wraps the drawer.\n */\n dialog: Slot<DialogProps>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n DrawerBaseProps & {\n /**\n * @deprecated OverlayDrawer can work only as a controlled component\n * and does not support uncontrolled mode i.e. defaultOpen prop\n */\n defaultOpen?: boolean;\n };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState>;\n"],"names":[],"rangeMappings":";;","mappings":"
|
|
1
|
+
{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n\n backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\n surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {\n /**\n * Slot for the dialog component that wraps the drawer.\n */\n dialog: Slot<DialogProps>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n DrawerBaseProps & {\n /**\n * @deprecated OverlayDrawer can work only as a controlled component\n * and does not support uncontrolled mode i.e. defaultOpen prop\n */\n defaultOpen?: boolean;\n };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState>;\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}
|
package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, Slot } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = Pick<DialogSurfaceSlots, 'backdrop'
|
|
1
|
+
{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, Slot } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = Partial<Pick<DialogSurfaceSlots, 'backdrop' | 'backdropMotion'>> & {\n root: Slot<'div', 'aside'>;\n};\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots> &\n Pick<DialogSurfaceProps, 'mountNode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAUA;;CAEC"}
|
|
@@ -2,25 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
OverlayDrawerSurfaceClassNames: function() {
|
|
13
|
-
return OverlayDrawerSurfaceClassNames;
|
|
14
|
-
},
|
|
15
|
-
useOverlayDrawerSurfaceStyles_unstable: function() {
|
|
5
|
+
Object.defineProperty(exports, "useOverlayDrawerSurfaceStyles_unstable", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
16
8
|
return useOverlayDrawerSurfaceStyles_unstable;
|
|
17
9
|
}
|
|
18
10
|
});
|
|
19
11
|
const _react = require("@griffel/react");
|
|
20
|
-
const OverlayDrawerSurfaceClassNames = {
|
|
21
|
-
root: 'fui-OverlayDrawerSurface',
|
|
22
|
-
backdrop: 'fui-OverlayDrawerSurface__backdrop'
|
|
23
|
-
};
|
|
24
12
|
/**
|
|
25
13
|
* Styles for the backdrop slot
|
|
26
14
|
*/ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rmnljus", null, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n }\n return state;\n};\n"],"names":["useOverlayDrawerSurfaceStyles_unstable","useBackdropResetStyles","__resetStyles","useBackdropStyles","__styles","nested","De3pzq","d","state","backdropResetStyles","backdropStyles","backdrop","className","mergeClasses","isNestedDialog"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBiBA;;;eAAAA;;;uBAhByC;AAE1D;;CAEA,GAAI,MAAMC,yBAAsB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC;AACD,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAOf,MAAMP,yCAA0CQ,CAAAA;IACvD;IACA,MAAMC,sBAAsBR;IAC5B,MAAMS,iBAAiBP;IACvB,IAAIK,MAAMG,QAAQ,EAAE;QAChBH,MAAMG,QAAQ,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,qBAAqBD,MAAMM,cAAc,IAAIJ,eAAeL,MAAM,EAAEG,MAAMG,QAAQ,CAACC,SAAS;IACxI;IACA,OAAOJ;AACX"}
|
|
@@ -12,9 +12,6 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
13
|
const _drawerContext = require("../../contexts/drawerContext");
|
|
14
14
|
const renderOverlayDrawer_unstable = (state, contextValue)=>{
|
|
15
|
-
if (!state.motion.canRender) {
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
15
|
(0, _reactutilities.assertSlots)(state);
|
|
19
16
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
|
|
20
17
|
value: contextValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n
|
|
1
|
+
{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.dialog>\n <state.root />\n </state.dialog>\n </DrawerProvider>\n );\n};\n"],"names":["renderOverlayDrawer_unstable","state","contextValue","assertSlots","_jsx","DrawerProvider","value","dialog","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAC4B;+BACuB;AAO5C,MAAMA,+BAA+B,CAACC,OAA2BC;IACtEC,IAAAA,2BAAAA,EAAwCF;IAExC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,6BAAAA,EAAAA;QAAeC,OAAOJ;kBACrB,WAAA,GAAAE,IAAAA,eAAA,EAACH,MAAMM,MAAM,EAAA;sBACX,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;;AAInB"}
|
|
@@ -9,24 +9,33 @@ Object.defineProperty(exports, "useOverlayDrawer_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const
|
|
12
|
+
const _reactdialog = require("@fluentui/react-dialog");
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const
|
|
14
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
15
|
+
const _drawerMotions = require("../../shared/drawerMotions");
|
|
15
16
|
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
|
|
16
|
-
const _OverlayDrawerDialog = require("./OverlayDrawerDialog");
|
|
17
17
|
const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
|
|
18
|
+
const _drawerMotionUtils = require("../../shared/drawerMotionUtils");
|
|
19
|
+
const STATIC_MOTION = {
|
|
20
|
+
active: true,
|
|
21
|
+
canRender: true,
|
|
22
|
+
ref: /*#__PURE__*/ _react.createRef(),
|
|
23
|
+
type: 'idle'
|
|
24
|
+
};
|
|
18
25
|
const useOverlayDrawer_unstable = (props, ref)=>{
|
|
19
26
|
const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
20
|
-
const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
|
|
21
|
-
const motion = (0, _reactmotionpreview.useMotion)(open);
|
|
27
|
+
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;
|
|
22
28
|
const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
|
|
23
29
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
24
30
|
const root = _reactutilities.slot.always({
|
|
25
31
|
...props,
|
|
26
|
-
ref
|
|
32
|
+
ref,
|
|
27
33
|
backdrop: hasCustomBackdrop ? {
|
|
28
34
|
...backdropProps
|
|
29
|
-
} : null
|
|
35
|
+
} : null,
|
|
36
|
+
backdropMotion: (0, _drawerMotionUtils.mergePresenceSlots)(backdropMotion, _drawerMotions.OverlaySurfaceBackdropMotion, {
|
|
37
|
+
size
|
|
38
|
+
})
|
|
30
39
|
}, {
|
|
31
40
|
/**
|
|
32
41
|
* Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
|
|
@@ -38,22 +47,27 @@ const useOverlayDrawer_unstable = (props, ref)=>{
|
|
|
38
47
|
onOpenChange,
|
|
39
48
|
inertTrapFocus,
|
|
40
49
|
modalType,
|
|
50
|
+
surfaceMotion: (0, _drawerMotionUtils.mergePresenceSlots)(surfaceMotion, _drawerMotions.OverlayDrawerMotion, {
|
|
51
|
+
position,
|
|
52
|
+
size
|
|
53
|
+
}),
|
|
41
54
|
/**
|
|
42
55
|
* children is not needed here because we construct the children in the render function,
|
|
43
56
|
* but it's required by DialogProps
|
|
44
57
|
*/ children: null
|
|
45
58
|
}, {
|
|
46
|
-
elementType:
|
|
59
|
+
elementType: _reactdialog.Dialog
|
|
47
60
|
});
|
|
48
61
|
return {
|
|
49
62
|
components: {
|
|
50
63
|
root: _OverlayDrawerSurface.OverlayDrawerSurface,
|
|
51
|
-
dialog:
|
|
64
|
+
dialog: _reactdialog.Dialog
|
|
52
65
|
},
|
|
53
66
|
root,
|
|
54
67
|
dialog,
|
|
68
|
+
open,
|
|
55
69
|
size,
|
|
56
70
|
position,
|
|
57
|
-
motion
|
|
71
|
+
motion: STATIC_MOTION
|
|
58
72
|
};
|
|
59
73
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawer.
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\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 */\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\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 */\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size }),\n /**\n * children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */\n children: null as unknown as JSX.Element,\n },\n {\n elementType: Dialog,\n },\n );\n\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog,\n },\n\n root,\n dialog,\n\n open,\n size,\n position,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["useOverlayDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","open","size","position","useDrawerDefaultProps","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","mergePresenceSlots","OverlaySurfaceBackdropMotion","elementType","OverlayDrawerSurface","dialog","OverlayDrawerMotion","children","Dialog","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;6BA1BU;gCACF;iEACE;+BAE2C;uCAC5B;sCAED;mCACF;AAEnC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAAA,WAAAA,GAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,4BAA4B,CACvCQ,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAE,GAAGT;IAE7F,MAAMU,gBAAgBC,oBAAAA,CAAKC,gBAAgB,CAACZ,MAAMa,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeI,kBAAkB;IAEzE,MAAMK,OAAOJ,oBAAAA,CAAKK,MAAM,CACtB;QACE,GAAGhB,KAAK;QACRJ;QACAiB,UAAUC,oBAAoB;YAAE,GAAGJ,aAAa;QAAC,IAAI;QACrDL,gBAAgBY,IAAAA,qCAAAA,EAAmBZ,gBAAgBa,2CAAAA,EAA8B;YAAEhB;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDiB,aAAaC,0CAAAA;IACf;IAGF,MAAMC,SAASV,oBAAAA,CAAKK,MAAM,CACxB;QACEf;QACAO;QACAD;QACAD;QACAG,eAAeQ,IAAAA,qCAAAA,EAAmBR,eAAea,kCAAAA,EAAqB;YAAEnB;YAAUD;QAAK;QACvF;;;OAGC,GACDqB,UAAU;IACZ,GACA;QACEJ,aAAaK,mBAAAA;IACf;IAGF,OAAO;QACLC,YAAY;YACVV,MAAMK,0CAAAA;YACNC,QAAQG,mBAAAA;QACV;QAEAT;QACAM;QAEApB;QACAC;QACAC;QACAuB,QAAQjC;IACV;AACF"}
|
|
@@ -20,7 +20,6 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
20
20
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
21
21
|
const _react1 = require("@griffel/react");
|
|
22
22
|
const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
|
|
23
|
-
const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
24
23
|
const overlayDrawerClassNames = {
|
|
25
24
|
root: 'fui-OverlayDrawer',
|
|
26
25
|
backdrop: 'fui-OverlayDrawer__backdrop'
|
|
@@ -46,84 +45,29 @@ const overlayDrawerClassNames = {
|
|
|
46
45
|
]
|
|
47
46
|
});
|
|
48
47
|
const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
49
|
-
start: {
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
end: {
|
|
53
|
-
Bz10aip: "f1g0pcr8"
|
|
54
|
-
},
|
|
48
|
+
start: {},
|
|
49
|
+
end: {},
|
|
55
50
|
bottom: {
|
|
56
|
-
Bz10aip: "fip488n",
|
|
57
51
|
Bhzewxz: "f198g47y",
|
|
58
52
|
Bqenvij: "fub80nq",
|
|
59
53
|
a9b677: "fr97h3j"
|
|
60
54
|
}
|
|
61
55
|
}, {
|
|
62
56
|
d: [
|
|
63
|
-
".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}",
|
|
64
|
-
".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}",
|
|
65
|
-
".fip488n{transform:translate3D(0, calc(var(--fui-Drawer--size) * 1), 0);}",
|
|
66
57
|
".f198g47y{top:auto;}",
|
|
67
58
|
".fub80nq{height:var(--fui-Drawer--size);}",
|
|
68
59
|
".fr97h3j{width:100vw;}"
|
|
69
60
|
]
|
|
70
61
|
});
|
|
71
|
-
const useDrawerMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
72
|
-
"default": {
|
|
73
|
-
abs64n: "fk73vx1",
|
|
74
|
-
E5pizo: "ff88big",
|
|
75
|
-
Bmy1vo4: "f1neo61",
|
|
76
|
-
Es3by: "f1ytgekk"
|
|
77
|
-
},
|
|
78
|
-
enter: {
|
|
79
|
-
abs64n: "f5p0z4x",
|
|
80
|
-
Bz10aip: "f87uvqx",
|
|
81
|
-
E5pizo: "f10nrhrw"
|
|
82
|
-
}
|
|
83
|
-
}, {
|
|
84
|
-
d: [
|
|
85
|
-
".fk73vx1{opacity:0;}",
|
|
86
|
-
".ff88big{box-shadow:0px var(--colorTransparentBackground);}",
|
|
87
|
-
".f1neo61{transition-property:transform,box-shadow,opacity;}",
|
|
88
|
-
".f1ytgekk{will-change:transform,box-shadow,opacity;}",
|
|
89
|
-
".f5p0z4x{opacity:1;}",
|
|
90
|
-
".f87uvqx{transform:translate3D(0, 0, 0);}",
|
|
91
|
-
".f10nrhrw{box-shadow:var(--shadow64);}"
|
|
92
|
-
]
|
|
93
|
-
});
|
|
94
|
-
/**
|
|
95
|
-
* Styles for the backdrop slot
|
|
96
|
-
*/ const useBackdropMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
97
|
-
"default": {
|
|
98
|
-
abs64n: "fk73vx1",
|
|
99
|
-
Bmy1vo4: "f13u1uyl",
|
|
100
|
-
Bkqvd7p: "f17wnm97",
|
|
101
|
-
Es3by: "f1gqqdtu"
|
|
102
|
-
},
|
|
103
|
-
enter: {
|
|
104
|
-
abs64n: "f5p0z4x"
|
|
105
|
-
}
|
|
106
|
-
}, {
|
|
107
|
-
d: [
|
|
108
|
-
".fk73vx1{opacity:0;}",
|
|
109
|
-
".f13u1uyl{transition-property:opacity;}",
|
|
110
|
-
".f17wnm97{transition-timing-function:var(--curveEasyEase);}",
|
|
111
|
-
".f1gqqdtu{will-change:opacity;}",
|
|
112
|
-
".f5p0z4x{opacity:1;}"
|
|
113
|
-
]
|
|
114
|
-
});
|
|
115
62
|
const useOverlayDrawerStyles_unstable = (state)=>{
|
|
116
63
|
'use no memo';
|
|
117
64
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
118
65
|
const resetStyles = useDrawerResetStyles();
|
|
119
66
|
const rootStyles = useDrawerRootStyles();
|
|
120
|
-
const durationStyles = (0, _useDrawerBaseStylesstyles.useDrawerDurationStyles)();
|
|
121
|
-
const drawerMotionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useDrawerMotionStyles());
|
|
122
|
-
const backdropMotionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useBackdropMotionStyles());
|
|
123
67
|
const backdrop = state.root.backdrop;
|
|
124
|
-
state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position],
|
|
68
|
+
state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);
|
|
125
69
|
if (backdrop) {
|
|
126
|
-
backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop,
|
|
70
|
+
backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, backdrop.className);
|
|
127
71
|
}
|
|
128
72
|
return state;
|
|
129
73
|
}; //# sourceMappingURL=useOverlayDrawerStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\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 end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","d","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","className","mergeClasses","position"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAwBIC,+BAA+B;eAA/BA;;;;iEA5BM;wBACmC;2CAEkB;AACrE,MAAMD,0BAA0B;IACnCE,MAAM;IACNC,UAAU;AACd;AACA;;CAEA,GAAI,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,qBAAA,EAAA,WAAA,WAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAOjC,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,gBAAA,EAAA;IAAAC,OAAA,CAAA;IAAAC,KAAA,CAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAWjB,MAAMf,kCAAmCgB,CAAAA;IAChD;IACA,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAchB;IACpB,MAAMiB,aAAab;IACnB,MAAML,WAAWc,MAAMf,IAAI,CAACC,QAAQ;IACpCc,MAAMf,IAAI,CAACoB,SAAS,GAAGC,IAAAA,oBAAY,EAACvB,wBAAwBE,IAAI,EAAEgB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMO,QAAQ,CAAC,EAAEP,MAAMf,IAAI,CAACoB,SAAS;IAC/I,IAAInB,UAAU;QACVA,SAASmB,SAAS,GAAGC,IAAAA,oBAAY,EAACvB,wBAAwBG,QAAQ,EAAEA,SAASmB,SAAS;IAC1F;IACA,OAAOL;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\n\nimport
|
|
1
|
+
{"version":3,"sources":["DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSX.Element) => {\n mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer) {\n describe('basic functionality', () => {\n it('should not render any element when closed', () => {\n mountFluent(<Component id=\"drawer\" />);\n\n cy.get('#drawer').should('not.exist');\n });\n\n it('should render an element when opened', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.get('#drawer').should('exist');\n });\n\n it('should render children content', () => {\n const content = 'Test the renderization';\n mountFluent(\n <Component id=\"drawer\" open>\n {content}\n </Component>,\n );\n\n cy.get('#drawer').contains(content);\n });\n\n it('should toggle visibility on open prop change', () => {\n const ExampleDrawer = () => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <Component id=\"drawer\" open={open} />\n <button id=\"button\" onClick={() => setOpen(true)}>\n Open\n </button>\n </>\n );\n };\n\n mountFluent(<ExampleDrawer />);\n\n cy.get('#drawer').should('not.exist');\n cy.get('#button').click();\n cy.get('#drawer').should('exist');\n });\n });\n\n describe('size prop', () => {\n const sizes = {\n small: 320,\n medium: 592,\n large: 940,\n full: 1000,\n };\n\n Object.entries(sizes).forEach(([size, width]) => {\n const sizeProp = size as DrawerProps['size'];\n\n it(`should have correct size when size is ${size}`, () => {\n mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n cy.viewport(1000, 1000);\n cy.get('#drawer').should('have.css', 'width', width + 'px');\n cy.get('#drawer').invoke('outerWidth').should('equal', width);\n });\n });\n\n it('width should not be bigger than viewport', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.viewport(319, 319);\n cy.get('#drawer').should('have.css', 'width', '319px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n });\n\n it('should have custom size', () => {\n mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n cy.get('#drawer').should('have.css', 'width', '200px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n });\n });\n\n describe('position prop', () => {\n const positions = {\n start: 'left',\n end: 'right',\n bottom: 'bottom',\n };\n\n Object.entries(positions).forEach(([position, side]) => {\n const positionProp = position as DrawerProps['position'];\n\n it(`should have correct position when position is ${position}`, () => {\n mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n cy.get('#drawer').should('have.css', side, '0px');\n });\n });\n });\n}\n"],"names":["testDrawerBaseScenarios","mountFluent","element","mount","React","createElement","FluentProvider","theme","webLightTheme","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","Fragment","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n /**\n * Ref to the element.\n */\n ref: React.Ref<Element>;\n\n /**\n * Current state of the element.\n *\n * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n * - `entering` - The element is performing enter animation.\n * - `entered` - The element has finished enter animation.\n * - `idle` - The element is currently not animating, but rendered on screen.\n * - `exiting` - The element is performing exit animation.\n * - `exited` - The element has finished exit animation.\n */\n type: MotionType;\n\n /**\n * Indicates whether the component can be rendered.\n * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n */\n canRender: boolean;\n\n /**\n * Indicates whether the component is ready to receive a CSS transition className.\n * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n */\n active: boolean;\n};\n\nexport type DrawerBaseProps = {\n /**\n * Position of the drawer.\n *\n * Note: 'bottom' does not supports size, but it supports customized height.\n *\n * @default 'start'\n */\n position?: 'start' | 'end' | 'bottom';\n\n /**\n * Size of the drawer.\n *\n * - 'small' - Drawer is 320px wide.\n * - 'medium' - Drawer is 592px wide.\n * - 'large' - Drawer is 940px wide.\n * - 'full' - Drawer is 100vw wide.\n *\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large' | 'full';\n\n /**\n * Controls the open state of the Drawer\n *\n * @default false\n */\n open?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n motion: MotionState<HTMLElement>;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n /**\n * Ref to the element.\n */\n ref: React.Ref<Element>;\n\n /**\n * Current state of the element.\n *\n * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n * - `entering` - The element is performing enter animation.\n * - `entered` - The element has finished enter animation.\n * - `idle` - The element is currently not animating, but rendered on screen.\n * - `exiting` - The element is performing exit animation.\n * - `exited` - The element has finished exit animation.\n */\n type: MotionType;\n\n /**\n * Indicates whether the component can be rendered.\n * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n */\n canRender: boolean;\n\n /**\n * Indicates whether the component is ready to receive a CSS transition className.\n * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n */\n active: boolean;\n};\n\nexport type DrawerBaseProps = {\n /**\n * Position of the drawer.\n *\n * Note: 'bottom' does not supports size, but it supports customized height.\n *\n * @default 'start'\n */\n position?: 'start' | 'end' | 'bottom';\n\n /**\n * Size of the drawer.\n *\n * - 'small' - Drawer is 320px wide.\n * - 'medium' - Drawer is 592px wide.\n * - 'large' - Drawer is 940px wide.\n * - 'full' - Drawer is 100vw wide.\n *\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large' | 'full';\n\n /**\n * Controls the open state of the Drawer\n *\n * @default false\n */\n open?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n /**\n * @deprecated Passed values will be static.\n */\n motion: MotionState<HTMLElement>;\n\n open?: boolean;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "mergePresenceSlots", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return mergePresenceSlots;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
function mergePresenceSlots(inputSlot, Component, params) {
|
|
14
|
+
if (inputSlot === null) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
...inputSlot,
|
|
19
|
+
children: (_, props)=>{
|
|
20
|
+
if (inputSlot === null || inputSlot === void 0 ? void 0 : inputSlot.children) {
|
|
21
|
+
return inputSlot.children(Component, {
|
|
22
|
+
...props,
|
|
23
|
+
...params
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
return /*#__PURE__*/ _react.createElement(Component, {
|
|
27
|
+
...props,
|
|
28
|
+
...params
|
|
29
|
+
}, props.children);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["drawerMotionUtils.tsx"],"sourcesContent":["import type { PresenceComponent, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport * as React from 'react';\n\ntype SerializableObject = Record<string, string | boolean | number>;\n\n/**\n * @internal\n * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components\n */\nexport function mergePresenceSlots<\n BaseMotionParams extends SerializableObject = {},\n EnhancedMotionParams extends SerializableObject = {},\n>(\n inputSlot: PresenceMotionSlotProps<EnhancedMotionParams> | null | undefined,\n Component: PresenceComponent<EnhancedMotionParams>,\n params: EnhancedMotionParams,\n): PresenceMotionSlotProps<BaseMotionParams> | null {\n if (inputSlot === null) {\n return null;\n }\n\n return {\n ...inputSlot,\n children: (_, props) => {\n if (inputSlot?.children) {\n return inputSlot.children(Component, { ...props, ...params });\n }\n\n return (\n <Component {...props} {...params}>\n {props.children}\n </Component>\n );\n },\n };\n}\n"],"names":["mergePresenceSlots","inputSlot","Component","params","children","_","props","React","createElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASgBA;;;eAAAA;;;;iEARO;AAQhB,SAASA,mBAIdC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,OAAA,WAAA,GACEI,OAAAC,aAAA,CAACN,WAAAA;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
InlineDrawerMotion: function() {
|
|
13
|
+
return InlineDrawerMotion;
|
|
14
|
+
},
|
|
15
|
+
OverlayDrawerMotion: function() {
|
|
16
|
+
return OverlayDrawerMotion;
|
|
17
|
+
},
|
|
18
|
+
OverlaySurfaceBackdropMotion: function() {
|
|
19
|
+
return OverlaySurfaceBackdropMotion;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
23
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
24
|
+
const _useDrawerBaseStylesstyles = require("./useDrawerBaseStyles.styles");
|
|
25
|
+
const durations = {
|
|
26
|
+
small: _reactmotion.motionTokens.durationGentle,
|
|
27
|
+
medium: _reactmotion.motionTokens.durationSlow,
|
|
28
|
+
large: _reactmotion.motionTokens.durationSlower,
|
|
29
|
+
full: _reactmotion.motionTokens.durationUltraSlow
|
|
30
|
+
};
|
|
31
|
+
const InlineDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size })=>{
|
|
32
|
+
const keyframes = [
|
|
33
|
+
{
|
|
34
|
+
...position === 'start' && {
|
|
35
|
+
transform: `translate3d(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`
|
|
36
|
+
},
|
|
37
|
+
...position === 'end' && {
|
|
38
|
+
transform: `translate3d(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}), 0, 0)`
|
|
39
|
+
},
|
|
40
|
+
...position === 'bottom' && {
|
|
41
|
+
transform: `translate3d(0, var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}), 0)`
|
|
42
|
+
},
|
|
43
|
+
opacity: 0
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
transform: 'translate3d(0, 0, 0)',
|
|
47
|
+
opacity: 1
|
|
48
|
+
}
|
|
49
|
+
];
|
|
50
|
+
const duration = durations[size];
|
|
51
|
+
return {
|
|
52
|
+
enter: {
|
|
53
|
+
keyframes,
|
|
54
|
+
duration,
|
|
55
|
+
easing: _reactmotion.motionTokens.curveDecelerateMid
|
|
56
|
+
},
|
|
57
|
+
exit: {
|
|
58
|
+
keyframes: [
|
|
59
|
+
...keyframes
|
|
60
|
+
].reverse(),
|
|
61
|
+
duration,
|
|
62
|
+
easing: _reactmotion.motionTokens.curveAccelerateMin
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
});
|
|
66
|
+
const OverlayDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size })=>{
|
|
67
|
+
const keyframes = [
|
|
68
|
+
{
|
|
69
|
+
...position === 'start' && {
|
|
70
|
+
transform: `translate3D(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`
|
|
71
|
+
},
|
|
72
|
+
...position === 'end' && {
|
|
73
|
+
transform: `translate3d(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`
|
|
74
|
+
},
|
|
75
|
+
...position === 'bottom' && {
|
|
76
|
+
transform: `translate3d(0, calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * 1), 0)`
|
|
77
|
+
},
|
|
78
|
+
boxShadow: `0px ${_reacttheme.tokens.colorTransparentBackground}`,
|
|
79
|
+
opacity: 0
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
transform: 'translate3d(0, 0, 0)',
|
|
83
|
+
boxShadow: _reacttheme.tokens.shadow64,
|
|
84
|
+
opacity: 1
|
|
85
|
+
}
|
|
86
|
+
];
|
|
87
|
+
const duration = durations[size];
|
|
88
|
+
return {
|
|
89
|
+
enter: {
|
|
90
|
+
keyframes,
|
|
91
|
+
duration,
|
|
92
|
+
easing: _reactmotion.motionTokens.curveDecelerateMid
|
|
93
|
+
},
|
|
94
|
+
exit: {
|
|
95
|
+
keyframes: [
|
|
96
|
+
...keyframes
|
|
97
|
+
].reverse(),
|
|
98
|
+
duration,
|
|
99
|
+
easing: _reactmotion.motionTokens.curveAccelerateMin
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
});
|
|
103
|
+
const OverlaySurfaceBackdropMotion = (0, _reactmotion.createPresenceComponent)(({ size })=>{
|
|
104
|
+
const keyframes = [
|
|
105
|
+
{
|
|
106
|
+
opacity: 0
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
opacity: 1
|
|
110
|
+
}
|
|
111
|
+
];
|
|
112
|
+
const duration = durations[size];
|
|
113
|
+
return {
|
|
114
|
+
enter: {
|
|
115
|
+
keyframes,
|
|
116
|
+
easing: _reactmotion.motionTokens.curveLinear,
|
|
117
|
+
duration
|
|
118
|
+
},
|
|
119
|
+
exit: {
|
|
120
|
+
keyframes: [
|
|
121
|
+
...keyframes
|
|
122
|
+
].reverse(),
|
|
123
|
+
easing: _reactmotion.motionTokens.curveLinear,
|
|
124
|
+
duration
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
});
|