@fluentui/react-drawer 9.0.0-beta.27 → 9.0.0-beta.29
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.json +133 -1
- package/CHANGELOG.md +37 -2
- package/dist/index.d.ts +8 -11
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js +3 -30
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
- package/lib/components/DrawerFooter/DrawerFooter.js +1 -1
- package/lib/components/DrawerFooter/DrawerFooter.js.map +1 -1
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js +3 -16
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js +3 -17
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js +3 -13
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +4 -5
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
- package/lib/components/DrawerInline/useDrawerInline.js +2 -7
- package/lib/components/DrawerInline/useDrawerInline.js.map +1 -1
- package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js +6 -10
- package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js.map +1 -1
- package/lib/components/DrawerOverlay/DrawerOverlay.types.js.map +1 -1
- package/lib/components/DrawerOverlay/renderDrawerOverlay.js +2 -4
- package/lib/components/DrawerOverlay/renderDrawerOverlay.js.map +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlay.js +17 -14
- package/lib/components/DrawerOverlay/useDrawerOverlay.js.map +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js +25 -2
- package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map +1 -1
- package/lib/shared/DrawerBase.types.js.map +1 -1
- package/lib/shared/useDrawerBaseStyles.styles.js +23 -30
- package/lib/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/lib/shared/useDrawerDefaultProps.js +2 -3
- package/lib/shared/useDrawerDefaultProps.js.map +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js +9 -64
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerFooter/DrawerFooter.js.map +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js +5 -30
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js +5 -32
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js +5 -24
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +3 -4
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
- package/lib-commonjs/components/DrawerInline/useDrawerInline.js +1 -6
- package/lib-commonjs/components/DrawerInline/useDrawerInline.js.map +1 -1
- package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js +6 -11
- package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/renderDrawerOverlay.js +2 -4
- package/lib-commonjs/components/DrawerOverlay/renderDrawerOverlay.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js +15 -12
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js +70 -0
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map +1 -1
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js +23 -77
- package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map +1 -1
- package/lib-commonjs/shared/useDrawerDefaultProps.js +2 -3
- package/lib-commonjs/shared/useDrawerDefaultProps.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,139 @@
|
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 26 Sep 2023 17:44:10 GMT",
|
|
6
|
+
"tag": "@fluentui/react-drawer_v9.0.0-beta.29",
|
|
7
|
+
"version": "9.0.0-beta.29",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-drawer",
|
|
13
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
|
|
14
|
+
"comment": "chore: trigger manual version bump after broken release"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-drawer",
|
|
19
|
+
"comment": "Bump @fluentui/react-dialog to v9.7.3",
|
|
20
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-drawer",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
|
|
26
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-drawer",
|
|
31
|
+
"comment": "Bump @fluentui/react-motion-preview to v0.2.8",
|
|
32
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-drawer",
|
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
|
|
38
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-drawer",
|
|
43
|
+
"comment": "Bump @fluentui/react-theme to v9.1.14",
|
|
44
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-drawer",
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.5",
|
|
50
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Tue, 26 Sep 2023 15:31:59 GMT",
|
|
57
|
+
"tag": "@fluentui/react-drawer_v9.0.0-beta.28",
|
|
58
|
+
"version": "9.0.0-beta.28",
|
|
59
|
+
"comments": {
|
|
60
|
+
"prerelease": [
|
|
61
|
+
{
|
|
62
|
+
"author": "marcosvmmoura@gmail.com",
|
|
63
|
+
"package": "@fluentui/react-drawer",
|
|
64
|
+
"commit": "afa2b8ebd2a09cbb1af23888736c7e3a21ec4a90",
|
|
65
|
+
"comment": "fix: improve performance of CSS classes"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "marcosvmmoura@gmail.com",
|
|
69
|
+
"package": "@fluentui/react-drawer",
|
|
70
|
+
"commit": "2828134c6385b70d2d11de50729480993ce1fc3a",
|
|
71
|
+
"comment": "fix: resolve technical debts"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "martinhochel@microsoft.com",
|
|
75
|
+
"package": "@fluentui/react-drawer",
|
|
76
|
+
"commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
|
|
77
|
+
"comment": "fix: bump swc core to mitigate transpilation memory leaks"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "marcosvmmoura@gmail.com",
|
|
81
|
+
"package": "@fluentui/react-drawer",
|
|
82
|
+
"commit": "a56c408d4ed860a48e22780289e5c4a00ebec6c4",
|
|
83
|
+
"comment": "fix: use context to fetch dialog id"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "marcosvmmoura@gmail.com",
|
|
87
|
+
"package": "@fluentui/react-drawer",
|
|
88
|
+
"commit": "fbaba50e246b708d0fcac7d79d0f99df5228ce15",
|
|
89
|
+
"comment": "fix: remove defaultOpen prop from DrawerInline as it had no effect"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "marcosvmmoura@gmail.com",
|
|
93
|
+
"package": "@fluentui/react-drawer",
|
|
94
|
+
"commit": "e31d18c0326a4c3f8f0966aaf2bb889cf44e4ce4",
|
|
95
|
+
"comment": "feat: add dialog slot"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-drawer",
|
|
100
|
+
"comment": "Bump @fluentui/react-dialog to v9.7.2",
|
|
101
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-drawer",
|
|
106
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
|
|
107
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-drawer",
|
|
112
|
+
"comment": "Bump @fluentui/react-motion-preview to v0.2.7",
|
|
113
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"author": "beachball",
|
|
117
|
+
"package": "@fluentui/react-drawer",
|
|
118
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
|
|
119
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"author": "beachball",
|
|
123
|
+
"package": "@fluentui/react-drawer",
|
|
124
|
+
"comment": "Bump @fluentui/react-theme to v9.1.13",
|
|
125
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"author": "beachball",
|
|
129
|
+
"package": "@fluentui/react-drawer",
|
|
130
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.4",
|
|
131
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"date": "Wed, 20 Sep 2023 17:47:37 GMT",
|
|
6
138
|
"tag": "@fluentui/react-drawer_v9.0.0-beta.27",
|
|
7
139
|
"version": "9.0.0-beta.27",
|
|
8
140
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,47 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 Sep 2023 17:44:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.29)
|
|
8
|
+
|
|
9
|
+
Tue, 26 Sep 2023 17:44:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.28..@fluentui/react-drawer_v9.0.0-beta.29)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-dialog to v9.7.3 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
17
|
+
- Bump @fluentui/react-motion-preview to v0.2.8 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
19
|
+
- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.28)
|
|
23
|
+
|
|
24
|
+
Tue, 26 Sep 2023 15:31:59 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.27..@fluentui/react-drawer_v9.0.0-beta.28)
|
|
26
|
+
|
|
27
|
+
### Changes
|
|
28
|
+
|
|
29
|
+
- fix: improve performance of CSS classes ([PR #29263](https://github.com/microsoft/fluentui/pull/29263) by marcosvmmoura@gmail.com)
|
|
30
|
+
- fix: resolve technical debts ([PR #29272](https://github.com/microsoft/fluentui/pull/29272) by marcosvmmoura@gmail.com)
|
|
31
|
+
- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
|
|
32
|
+
- fix: use context to fetch dialog id ([PR #29273](https://github.com/microsoft/fluentui/pull/29273) by marcosvmmoura@gmail.com)
|
|
33
|
+
- fix: remove defaultOpen prop from DrawerInline as it had no effect ([PR #29274](https://github.com/microsoft/fluentui/pull/29274) by marcosvmmoura@gmail.com)
|
|
34
|
+
- feat: add dialog slot ([PR #29217](https://github.com/microsoft/fluentui/pull/29217) by marcosvmmoura@gmail.com)
|
|
35
|
+
- Bump @fluentui/react-dialog to v9.7.2 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
37
|
+
- Bump @fluentui/react-motion-preview to v0.2.7 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
38
|
+
- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
39
|
+
- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
40
|
+
- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
41
|
+
|
|
7
42
|
## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.27)
|
|
8
43
|
|
|
9
|
-
Wed, 20 Sep 2023 17:
|
|
44
|
+
Wed, 20 Sep 2023 17:47:37 GMT
|
|
10
45
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.26..@fluentui/react-drawer_v9.0.0-beta.27)
|
|
11
46
|
|
|
12
47
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -41,12 +41,6 @@ declare type DrawerBaseProps = {
|
|
|
41
41
|
* @default false
|
|
42
42
|
*/
|
|
43
43
|
open?: MotionShorthand<HTMLDivElement>;
|
|
44
|
-
/**
|
|
45
|
-
* Default value for the uncontrolled open state of the Drawer.
|
|
46
|
-
*
|
|
47
|
-
* @default false
|
|
48
|
-
*/
|
|
49
|
-
defaultOpen?: boolean;
|
|
50
44
|
};
|
|
51
45
|
|
|
52
46
|
declare type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {
|
|
@@ -75,7 +69,7 @@ export declare type DrawerBodySlots = {
|
|
|
75
69
|
export declare type DrawerBodyState = ComponentState<DrawerBodySlots>;
|
|
76
70
|
|
|
77
71
|
/**
|
|
78
|
-
* DrawerFooter
|
|
72
|
+
* DrawerFooter provides a structured footer for the drawer component.
|
|
79
73
|
*/
|
|
80
74
|
export declare const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;
|
|
81
75
|
|
|
@@ -204,22 +198,25 @@ export declare type DrawerInlineState = Required<ComponentState<DrawerInlineSlot
|
|
|
204
198
|
*/
|
|
205
199
|
export declare const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps>;
|
|
206
200
|
|
|
207
|
-
export declare const drawerOverlayClassNames: SlotClassNames<DrawerOverlaySlots>;
|
|
201
|
+
export declare const drawerOverlayClassNames: Omit<SlotClassNames<DrawerOverlaySlots>, 'dialog'>;
|
|
208
202
|
|
|
209
203
|
/**
|
|
210
204
|
* DrawerOverlay Props
|
|
211
205
|
*/
|
|
212
|
-
export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &
|
|
206
|
+
export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> & DrawerBaseProps;
|
|
213
207
|
|
|
214
208
|
export declare type DrawerOverlaySlots = DialogSurfaceSlots & {
|
|
215
209
|
root: Slot<DialogSurfaceProps>;
|
|
210
|
+
/**
|
|
211
|
+
* Slot for the dialog component that wraps the drawer.
|
|
212
|
+
*/
|
|
213
|
+
dialog?: Slot<DialogProps>;
|
|
216
214
|
};
|
|
217
215
|
|
|
218
216
|
/**
|
|
219
217
|
* State used in rendering DrawerOverlay
|
|
220
218
|
*/
|
|
221
|
-
export declare type DrawerOverlayState =
|
|
222
|
-
dialog: DialogProps;
|
|
219
|
+
export declare type DrawerOverlayState = Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> & Required<DrawerBaseState & {
|
|
223
220
|
backdropMotion: MotionState<HTMLDivElement>;
|
|
224
221
|
}>;
|
|
225
222
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerBodyClassNames = {
|
|
4
4
|
root: 'fui-DrawerBody'
|
|
@@ -6,40 +6,13 @@ export const drawerBodyClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/
|
|
10
|
-
root: {
|
|
11
|
-
B6of3ja: "fkrn0sh",
|
|
12
|
-
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
13
|
-
jrapky: "fmxx68s",
|
|
14
|
-
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
15
|
-
z8tnut: "f1sl3k7w",
|
|
16
|
-
z189sj: ["fnbas0t", "f1mswpri"],
|
|
17
|
-
Byoj8tv: "f1brlhvm",
|
|
18
|
-
uwmqm3: ["f1mswpri", "fnbas0t"],
|
|
19
|
-
B68tc82: "f1oy3dpc",
|
|
20
|
-
Bmxbyg5: "f5zp4f",
|
|
21
|
-
Bh6795r: "fqerorx",
|
|
22
|
-
Bnnss6s: "f1neuvcm",
|
|
23
|
-
xawz: "f1pztt34",
|
|
24
|
-
qb2dma: "f1ub7u0d",
|
|
25
|
-
Bcmaq0h: "f1igvcbx",
|
|
26
|
-
B676am1: "f1fofb6i",
|
|
27
|
-
e5kdtc: "fo6xqva",
|
|
28
|
-
De3pzq: "fxugw4r",
|
|
29
|
-
Bkjc3bi: "fcre6b6",
|
|
30
|
-
Bgh53k4: "f1besv5s",
|
|
31
|
-
Bcx2cba: "f1pqm9hp",
|
|
32
|
-
gonrqn: "f2c46kh"
|
|
33
|
-
}
|
|
34
|
-
}, {
|
|
35
|
-
d: [".fkrn0sh{margin-top:-1px;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fmxx68s{margin-bottom:-1px;}", ".f1sl3k7w{padding-top:1px;}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f1brlhvm{padding-bottom:1px;}", ".f1oy3dpc{overflow-x:auto;}", ".f5zp4f{overflow-y:auto;}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".f1pztt34{flex-basis:0;}", ".f1ub7u0d{align-self:stretch;}", ".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}", ".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}", ".fo6xqva{background-repeat:no-repeat;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fcre6b6{background-size:100% 2px,100% 2px,100% 1px,100% 1px;}", ".f1besv5s{background-attachment:local,local,scroll,scroll;}", ".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]
|
|
36
|
-
});
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("r10z3gsy", "r1ppc5ap", [".r10z3gsy{margin-top:-1px;margin-right:0;margin-bottom:-1px;margin-left:0;padding-top:1px;padding-right:var(--spacingHorizontalXXL);padding-bottom:1px;padding-left:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}", ".r10z3gsy:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".r10z3gsy:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}", ".r1ppc5ap{margin-top:-1px;margin-left:0;margin-bottom:-1px;margin-right:0;padding-top:1px;padding-left:var(--spacingHorizontalXXL);padding-bottom:1px;padding-right:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}", ".r1ppc5ap:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".r1ppc5ap:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]);
|
|
37
10
|
/**
|
|
38
11
|
* Apply styling to the DrawerBody slots based on the state
|
|
39
12
|
*/
|
|
40
13
|
export const useDrawerBodyStyles_unstable = state => {
|
|
41
14
|
const styles = useStyles();
|
|
42
|
-
state.root.className = mergeClasses(drawerBodyClassNames.root, styles
|
|
15
|
+
state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
|
|
43
16
|
return state;
|
|
44
17
|
};
|
|
45
18
|
//# sourceMappingURL=useDrawerBodyStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n ...shorthands.margin('-1px', 0),\n ...shorthands.padding('1px', tokens.spacingHorizontalXXL),\n ...shorthands.overflow('auto'),\n ...shorthands.flex(1),\n alignSelf: 'stretch',\n // A \"good hack\" to display top and bottom borders based on the scroll position\n backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n 'background-position': 'bottom center, top center, bottom center, top center',\n backgroundRepeat: 'no-repeat',\n backgroundColor: tokens.colorNeutralBackground1,\n backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n backgroundAttachment: 'local, local, scroll, scroll',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,uvEAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { useDrawerFooter_unstable } from './useDrawerFooter';
|
|
|
4
4
|
import { renderDrawerFooter_unstable } from './renderDrawerFooter';
|
|
5
5
|
import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';
|
|
6
6
|
/**
|
|
7
|
-
* DrawerFooter
|
|
7
|
+
* DrawerFooter provides a structured footer for the drawer component.
|
|
8
8
|
*/ export const DrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
9
9
|
const state = useDrawerFooter_unstable(props, ref);
|
|
10
10
|
useDrawerFooterStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\nimport type { DrawerFooterProps } from './DrawerFooter.types';\n\n/**\n * DrawerFooter
|
|
1
|
+
{"version":3,"sources":["DrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\nimport type { DrawerFooterProps } from './DrawerFooter.types';\n\n/**\n * DrawerFooter provides a structured footer for the drawer component.\n */\nexport const DrawerFooter: ForwardRefComponent<DrawerFooterProps> = React.forwardRef((props, ref) => {\n const state = useDrawerFooter_unstable(props, ref);\n\n useDrawerFooterStyles_unstable(state);\n useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);\n\n return renderDrawerFooter_unstable(state);\n});\n\nDrawerFooter.displayName = 'DrawerFooter';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerFooter_unstable","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","DrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerFooterClassNames = {
|
|
4
4
|
root: 'fui-DrawerFooter'
|
|
@@ -6,26 +6,13 @@ export const drawerFooterClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/
|
|
10
|
-
root: {
|
|
11
|
-
z8tnut: "fikn0iw",
|
|
12
|
-
z189sj: ["fnbas0t", "f1mswpri"],
|
|
13
|
-
Byoj8tv: "fz66xbh",
|
|
14
|
-
uwmqm3: ["f1mswpri", "fnbas0t"],
|
|
15
|
-
mc9l5x: "f22iagw",
|
|
16
|
-
Brf1p80: "fbhxue7",
|
|
17
|
-
Bt984gj: "f122n59",
|
|
18
|
-
i8kkvl: "fsnqrgy"
|
|
19
|
-
}
|
|
20
|
-
}, {
|
|
21
|
-
d: [".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}", ".f22iagw{display:flex;}", ".fbhxue7{justify-content:flex-start;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}"]
|
|
22
|
-
});
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("rli1cm2", "r1xlf3nx", [".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}", ".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}"]);
|
|
23
10
|
/**
|
|
24
11
|
* Apply styling to the DrawerFooter slots based on the state
|
|
25
12
|
*/
|
|
26
13
|
export const useDrawerFooterStyles_unstable = state => {
|
|
27
14
|
const styles = useStyles();
|
|
28
|
-
state.root.className = mergeClasses(drawerFooterClassNames.root, styles
|
|
15
|
+
state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);
|
|
29
16
|
return state;
|
|
30
17
|
};
|
|
31
18
|
//# sourceMappingURL=useDrawerFooterStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,qjBAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerHeaderClassNames = {
|
|
4
4
|
root: 'fui-DrawerHeader'
|
|
@@ -6,27 +6,13 @@ export const drawerHeaderClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/
|
|
10
|
-
root: {
|
|
11
|
-
z8tnut: "f1ggmyuv",
|
|
12
|
-
z189sj: ["fnbas0t", "f1mswpri"],
|
|
13
|
-
Byoj8tv: "f5b47ha",
|
|
14
|
-
uwmqm3: ["f1mswpri", "fnbas0t"],
|
|
15
|
-
i8kkvl: "fsnqrgy",
|
|
16
|
-
Belr9w4: "fylz90v",
|
|
17
|
-
qb2dma: "f1ub7u0d",
|
|
18
|
-
mc9l5x: "f22iagw",
|
|
19
|
-
Beiy3e4: "f1vx9l62"
|
|
20
|
-
}
|
|
21
|
-
}, {
|
|
22
|
-
d: [".f1ggmyuv{padding-top:var(--spacingVerticalXXL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1ub7u0d{align-self:stretch;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}"]
|
|
23
|
-
});
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("r10tpwon", "r53n3g6", [".r10tpwon{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}", ".r53n3g6{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}"]);
|
|
24
10
|
/**
|
|
25
11
|
* Apply styling to the DrawerHeader slots based on the state
|
|
26
12
|
*/
|
|
27
13
|
export const useDrawerHeaderStyles_unstable = state => {
|
|
28
14
|
const styles = useStyles();
|
|
29
|
-
state.root.className = mergeClasses(drawerHeaderClassNames.root, styles
|
|
15
|
+
state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);
|
|
30
16
|
return state;
|
|
31
17
|
};
|
|
32
18
|
//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS),\n ...shorthands.gap(tokens.spacingHorizontalS),\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column'\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,+mBAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const drawerHeaderNavigationClassNames = {
|
|
4
4
|
root: 'fui-DrawerHeaderNavigation'
|
|
@@ -6,23 +6,13 @@ export const drawerHeaderNavigationClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/
|
|
10
|
-
root: {
|
|
11
|
-
B6of3ja: "f19304h5",
|
|
12
|
-
t21cq0: ["f1qb19o0", "f1p10pdi"],
|
|
13
|
-
jrapky: "f118i8d9",
|
|
14
|
-
Frg6f3: ["f1p10pdi", "f1qb19o0"],
|
|
15
|
-
Bxn5svx: "f1ftwmyh"
|
|
16
|
-
}
|
|
17
|
-
}, {
|
|
18
|
-
d: [".f19304h5{margin-top:calc(var(--spacingVerticalS) * -1);}", ".f1qb19o0{margin-right:calc(var(--spacingHorizontalL) * -1);}", ".f1p10pdi{margin-left:calc(var(--spacingHorizontalL) * -1);}", ".f118i8d9{margin-bottom:calc(var(--spacingVerticalS) * -1);}", ".f1ftwmyh{order:0;}"]
|
|
19
|
-
});
|
|
9
|
+
const useStyles = /*#__PURE__*/__resetStyles("rfs9jc2", "r4yk2e8", [".rfs9jc2{margin-top:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);}", ".r4yk2e8{margin-top:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);}"]);
|
|
20
10
|
/**
|
|
21
11
|
* Apply styling to the DrawerHeaderNavigation slots based on the state
|
|
22
12
|
*/
|
|
23
13
|
export const useDrawerHeaderNavigationStyles_unstable = state => {
|
|
24
14
|
const styles = useStyles();
|
|
25
|
-
state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles
|
|
15
|
+
state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
|
|
26
16
|
return state;
|
|
27
17
|
};
|
|
28
18
|
//# sourceMappingURL=useDrawerHeaderNavigationStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n ...shorthands.margin(`calc(${tokens.spacingVerticalS} * -1)`, `calc(${tokens.spacingHorizontalL} * -1)`)\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,ubAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,wCAAwC,GAAIC,KAAK,IAAG;EACjE,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
3
|
-
import {
|
|
3
|
+
import { useDialogContext_unstable } from '@fluentui/react-dialog';
|
|
4
4
|
/**
|
|
5
5
|
* @internal
|
|
6
6
|
* Create the shorthand for the heading element.
|
|
7
7
|
* @param props - props from this instance of DrawerHeaderTitle
|
|
8
8
|
*/ const useHeadingProps = ({ children, heading })=>{
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
return slot.optional(titleProps, {
|
|
9
|
+
const id = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
|
|
10
|
+
return slot.optional(heading, {
|
|
12
11
|
defaultProps: {
|
|
13
|
-
|
|
12
|
+
id,
|
|
14
13
|
children
|
|
15
14
|
},
|
|
16
15
|
renderByDefault: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * @internal\n * Create the shorthand for the heading element.\n * @param props - props from this instance of DrawerHeaderTitle\n */\nconst useHeadingProps = ({ children, heading }: DrawerHeaderTitleProps) => {\n const id = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n return slot.optional(heading, {\n defaultProps: {\n id,\n children,\n },\n renderByDefault: true,\n elementType: 'h2',\n });\n};\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n props: DrawerHeaderTitleProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n const headingProps = useHeadingProps(props);\n\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div',\n },\n\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n heading: headingProps,\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogContext_unstable","useHeadingProps","children","heading","id","ctx","dialogTitleId","optional","defaultProps","renderByDefault","elementType","useDrawerHeaderTitle_unstable","props","ref","headingProps","components","root","action","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;CAIC,GACD,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAA0B;IACpE,MAAMC,KAAKJ,0BAA0BK,CAAAA,MAAOA,IAAIC,aAAa;IAE7D,OAAOP,KAAKQ,QAAQ,CAACJ,SAAS;QAC5BK,cAAc;YACZJ;YACAF;QACF;QACAO,iBAAiB;QACjBC,aAAa;IACf;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,eAAeb,gBAAgBW;IAErC,OAAO;QACLG,YAAY;YACVC,MAAM;YACNb,SAAS;YACTc,QAAQ;QACV;QAEAD,MAAMjB,KAAKmB,MAAM,CACfpB,sBAAsB,OAAO;YAC3Be;YACA,GAAGD,KAAK;QACV,IACA;YAAEF,aAAa;QAAM;QAEvBP,SAASW;QACTG,QAAQlB,KAAKQ,QAAQ,CAACK,MAAMK,MAAM,EAAE;YAClCP,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps, slot,
|
|
2
|
+
import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useMotion } from '@fluentui/react-motion-preview';
|
|
4
4
|
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
5
5
|
/**
|
|
@@ -11,13 +11,8 @@ import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
|
11
11
|
* @param props - props from this instance of DrawerInline
|
|
12
12
|
* @param ref - reference to root HTMLElement of DrawerInline
|
|
13
13
|
*/ export const useDrawerInline_unstable = (props, ref)=>{
|
|
14
|
-
const { size, position,
|
|
14
|
+
const { size, position, open } = useDrawerDefaultProps(props);
|
|
15
15
|
const { separator = false } = props;
|
|
16
|
-
const [open] = useControllableState({
|
|
17
|
-
state: defaultProps.open,
|
|
18
|
-
defaultState: defaultProps.defaultOpen,
|
|
19
|
-
initialState: false
|
|
20
|
-
});
|
|
21
16
|
const motion = useMotion(open);
|
|
22
17
|
return {
|
|
23
18
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot,
|
|
1
|
+
{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (\n props: DrawerInlineProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerInlineState => {\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false } = props;\n\n const motion = useMotion<HTMLDivElement>(open);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getNativeElementProps('div', {\n ...props,\n ref: useMergedRefs(ref, motion.ref),\n }),\n { elementType: 'div' },\n ),\n\n size,\n position,\n separator,\n motion,\n };\n};\n"],"names":["React","getNativeElementProps","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useDrawerInline_unstable","props","ref","size","position","open","separator","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAMM,SAAST,UAA0BO;IAEzC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMb,KAAKc,MAAM,CACff,sBAAsB,OAAO;YAC3B,GAAGM,KAAK;YACRC,KAAKL,cAAcK,KAAKK,OAAOL,GAAG;QACpC,IACA;YAAES,aAAa;QAAM;QAGvBR;QACAC;QACAE;QACAC;IACF;AACF,EAAE"}
|
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
|
-
import { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
|
|
4
|
+
import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
|
|
5
5
|
export const drawerInlineClassNames = {
|
|
6
6
|
root: 'fui-DrawerInline'
|
|
7
7
|
};
|
|
8
|
+
const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1aiwccr", "rzg5lxf", [".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}", ".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"]);
|
|
8
9
|
/**
|
|
9
10
|
* Styles for the root slot
|
|
10
11
|
*/
|
|
11
12
|
const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
|
|
12
13
|
const useDrawerRootStyles = /*#__PURE__*/__styles({
|
|
13
|
-
root: {
|
|
14
|
-
qhf8xq: "f10pi13n",
|
|
15
|
-
abs64n: "fk73vx1",
|
|
16
|
-
Bmy1vo4: "f15rjlgw",
|
|
17
|
-
Es3by: "f1blt7p"
|
|
18
|
-
},
|
|
19
14
|
separatorStart: {
|
|
20
15
|
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
21
16
|
vrafjx: ["fcdblym", "fjik90z"],
|
|
@@ -37,12 +32,13 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
|
|
|
37
32
|
Bz10aip: "f87uvqx"
|
|
38
33
|
}
|
|
39
34
|
}, {
|
|
40
|
-
d: [".
|
|
35
|
+
d: [".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
|
|
41
36
|
});
|
|
42
37
|
/**
|
|
43
38
|
* Apply styling to the DrawerInline slots based on the state
|
|
44
39
|
*/
|
|
45
40
|
export const useDrawerInlineStyles_unstable = state => {
|
|
41
|
+
const resetStyles = useDrawerResetStyles();
|
|
46
42
|
const baseClassNames = useDrawerBaseClassNames(state);
|
|
47
43
|
const rootStyles = useDrawerRootStyles();
|
|
48
44
|
const separatorClass = React.useMemo(() => {
|
|
@@ -51,7 +47,7 @@ export const useDrawerInlineStyles_unstable = state => {
|
|
|
51
47
|
}
|
|
52
48
|
return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
|
|
53
49
|
}, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
|
|
54
|
-
state.root.className = mergeClasses(drawerInlineClassNames.root,
|
|
50
|
+
state.root.className = mergeClasses(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
|
|
55
51
|
return state;
|
|
56
52
|
};
|
|
57
53
|
//# sourceMappingURL=useDrawerInlineStyles.styles.js.map
|