@fluentui/react-drawer 9.0.0-beta.21 → 9.0.0-beta.22
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 +52 -7
- package/CHANGELOG.md +22 -8
- package/lib/components/Drawer/Drawer.types.js.map +1 -1
- package/lib/components/Drawer/renderDrawer.js.map +1 -1
- package/lib/components/Drawer/useDrawer.js +2 -2
- package/lib/components/Drawer/useDrawer.js.map +1 -1
- package/lib/components/DrawerBody/renderDrawerBody.js.map +1 -1
- package/lib/components/DrawerBody/useDrawerBody.js.map +1 -1
- package/lib/components/DrawerFooter/renderDrawerFooter.js.map +1 -1
- package/lib/components/DrawerFooter/useDrawerFooter.js.map +1 -1
- package/lib/components/DrawerHeader/renderDrawerHeader.js.map +1 -1
- package/lib/components/DrawerHeader/useDrawerHeader.js.map +1 -1
- package/lib/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.js.map +1 -1
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map +1 -1
- package/lib/components/DrawerHeaderTitle/renderDrawerHeaderTitle.js.map +1 -1
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
- package/lib/components/DrawerInline/DrawerInline.types.js.map +1 -1
- package/lib/components/DrawerInline/renderDrawerInline.js.map +1 -1
- package/lib/components/DrawerInline/useDrawerInline.js +2 -2
- package/lib/components/DrawerInline/useDrawerInline.js.map +1 -1
- package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js +1 -1
- 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.map +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlay.js +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlay.js.map +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map +1 -1
- package/lib/e2e/DrawerShared.js +108 -0
- package/lib/e2e/DrawerShared.js.map +1 -0
- package/lib-commonjs/components/Drawer/useDrawer.js +2 -2
- package/lib-commonjs/components/Drawer/useDrawer.js.map +1 -1
- package/lib-commonjs/components/DrawerInline/useDrawerInline.js +1 -1
- package/lib-commonjs/components/DrawerInline/useDrawerInline.js.map +1 -1
- package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js +1 -1
- package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map +1 -1
- package/lib-commonjs/e2e/DrawerShared.js +119 -0
- package/lib-commonjs/e2e/DrawerShared.js.map +1 -0
- package/package.json +5 -5
- /package/lib/{util → shared}/DrawerBase.types.js +0 -0
- /package/lib/{util → shared}/DrawerBase.types.js.map +0 -0
- /package/lib/{util → shared}/useDrawerBaseStyles.styles.js +0 -0
- /package/lib/{util → shared}/useDrawerBaseStyles.styles.js.map +0 -0
- /package/lib/{util → shared}/useDrawerDefaultProps.js +0 -0
- /package/lib/{util → shared}/useDrawerDefaultProps.js.map +0 -0
- /package/lib-commonjs/{util → shared}/DrawerBase.types.js +0 -0
- /package/lib-commonjs/{util → shared}/DrawerBase.types.js.map +0 -0
- /package/lib-commonjs/{util → shared}/useDrawerBaseStyles.styles.js +0 -0
- /package/lib-commonjs/{util → shared}/useDrawerBaseStyles.styles.js.map +0 -0
- /package/lib-commonjs/{util → shared}/useDrawerDefaultProps.js +0 -0
- /package/lib-commonjs/{util → shared}/useDrawerDefaultProps.js.map +0 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,52 @@
|
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue, 05 Sep 2023
|
|
5
|
+
"date": "Tue, 05 Sep 2023 15:35:06 GMT",
|
|
6
|
+
"tag": "@fluentui/react-drawer_v9.0.0-beta.22",
|
|
7
|
+
"version": "9.0.0-beta.22",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "marcosvmmoura@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-drawer",
|
|
13
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91",
|
|
14
|
+
"comment": "refactor: organize code imports"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "marcosvmmoura@gmail.com",
|
|
18
|
+
"package": "@fluentui/react-drawer",
|
|
19
|
+
"commit": "c6a8055e413d7efca7c968e11b70638f869b610a",
|
|
20
|
+
"comment": "test: add e2e tests for base Drawer components"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-drawer",
|
|
25
|
+
"comment": "Bump @fluentui/react-dialog to v9.6.2",
|
|
26
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-drawer",
|
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.5",
|
|
32
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-drawer",
|
|
37
|
+
"comment": "Bump @fluentui/react-motion-preview to v0.2.1",
|
|
38
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-drawer",
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.2",
|
|
44
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Tue, 05 Sep 2023 13:29:22 GMT",
|
|
6
51
|
"tag": "@fluentui/react-drawer_v9.0.0-beta.21",
|
|
7
52
|
"version": "9.0.0-beta.21",
|
|
8
53
|
"comments": {
|
|
@@ -41,37 +86,37 @@
|
|
|
41
86
|
"author": "beachball",
|
|
42
87
|
"package": "@fluentui/react-drawer",
|
|
43
88
|
"comment": "Bump @fluentui/react-dialog to v9.6.1",
|
|
44
|
-
"commit": "
|
|
89
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
45
90
|
},
|
|
46
91
|
{
|
|
47
92
|
"author": "beachball",
|
|
48
93
|
"package": "@fluentui/react-drawer",
|
|
49
94
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.4",
|
|
50
|
-
"commit": "
|
|
95
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
51
96
|
},
|
|
52
97
|
{
|
|
53
98
|
"author": "beachball",
|
|
54
99
|
"package": "@fluentui/react-drawer",
|
|
55
100
|
"comment": "Bump @fluentui/react-motion-preview to v0.2.0",
|
|
56
|
-
"commit": "
|
|
101
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
57
102
|
},
|
|
58
103
|
{
|
|
59
104
|
"author": "beachball",
|
|
60
105
|
"package": "@fluentui/react-drawer",
|
|
61
106
|
"comment": "Bump @fluentui/react-shared-contexts to v9.7.3",
|
|
62
|
-
"commit": "
|
|
107
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
63
108
|
},
|
|
64
109
|
{
|
|
65
110
|
"author": "beachball",
|
|
66
111
|
"package": "@fluentui/react-drawer",
|
|
67
112
|
"comment": "Bump @fluentui/react-theme to v9.1.12",
|
|
68
|
-
"commit": "
|
|
113
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
69
114
|
},
|
|
70
115
|
{
|
|
71
116
|
"author": "beachball",
|
|
72
117
|
"package": "@fluentui/react-drawer",
|
|
73
118
|
"comment": "Bump @fluentui/react-utilities to v9.13.1",
|
|
74
|
-
"commit": "
|
|
119
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
75
120
|
}
|
|
76
121
|
]
|
|
77
122
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue, 05 Sep 2023
|
|
3
|
+
This log was last generated on Tue, 05 Sep 2023 15:35:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.22)
|
|
8
|
+
|
|
9
|
+
Tue, 05 Sep 2023 15:35:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.21..@fluentui/react-drawer_v9.0.0-beta.22)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- refactor: organize code imports ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by marcosvmmoura@gmail.com)
|
|
15
|
+
- test: add e2e tests for base Drawer components ([PR #29029](https://github.com/microsoft/fluentui/pull/29029) by marcosvmmoura@gmail.com)
|
|
16
|
+
- Bump @fluentui/react-dialog to v9.6.2 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.5 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion-preview to v0.2.1 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.13.2 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.21)
|
|
8
22
|
|
|
9
|
-
Tue, 05 Sep 2023 13:
|
|
23
|
+
Tue, 05 Sep 2023 13:29:22 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.20..@fluentui/react-drawer_v9.0.0-beta.21)
|
|
11
25
|
|
|
12
26
|
### Changes
|
|
@@ -16,12 +30,12 @@ Tue, 05 Sep 2023 13:23:26 GMT
|
|
|
16
30
|
- bumps @swc/helpers version to 0.5.1 ([PR #28989](https://github.com/microsoft/fluentui/pull/28989) by bernardo.sunderhus@gmail.com)
|
|
17
31
|
- test: add simple renderization tests for sub components ([PR #29043](https://github.com/microsoft/fluentui/pull/29043) by marcosvmmoura@gmail.com)
|
|
18
32
|
- feat: add motion for Drawer ([PR #28999](https://github.com/microsoft/fluentui/pull/28999) by marcosvmmoura@gmail.com)
|
|
19
|
-
- Bump @fluentui/react-dialog to v9.6.1 ([PR #
|
|
20
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.4 ([PR #
|
|
21
|
-
- Bump @fluentui/react-motion-preview to v0.2.0 ([PR #
|
|
22
|
-
- Bump @fluentui/react-shared-contexts to v9.7.3 ([PR #
|
|
23
|
-
- Bump @fluentui/react-theme to v9.1.12 ([PR #
|
|
24
|
-
- Bump @fluentui/react-utilities to v9.13.1 ([PR #
|
|
33
|
+
- Bump @fluentui/react-dialog to v9.6.1 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
34
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.4 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
35
|
+
- Bump @fluentui/react-motion-preview to v0.2.0 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
36
|
+
- Bump @fluentui/react-shared-contexts to v9.7.3 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
37
|
+
- Bump @fluentui/react-theme to v9.1.12 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
38
|
+
- Bump @fluentui/react-utilities to v9.13.1 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
25
39
|
|
|
26
40
|
## [9.0.0-beta.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.20)
|
|
27
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerOverlayProps } from '../DrawerOverlay
|
|
1
|
+
{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayProps } from '../DrawerOverlay';\nimport type { DrawerInlineProps } from '../DrawerInline';\n\nexport type DrawerSlots = {\n /**\n * Root slot of the Drawer.\n */\n root: Slot<DrawerOverlayProps | DrawerInlineProps>;\n};\n\n/**\n * Drawer Props\n */\nexport type DrawerProps = ComponentProps<DrawerSlots> & {\n /**\n * Type of the drawer.\n * @default overlay\n *\n * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n * - 'inline' - Drawer is stacked with the content\n */\n type?: 'inline' | 'overlay';\n};\n\n/**\n * State used in rendering Drawer\n */\nexport type DrawerState = ComponentState<DrawerSlots>;\n"],"names":[],"mappings":"AAAA,WA6BsD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n assertSlots<DrawerSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawer_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n assertSlots<DrawerSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawer_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { slot } from '@fluentui/react-utilities';
|
|
3
|
-
import { DrawerOverlay } from '../DrawerOverlay
|
|
4
|
-
import { DrawerInline } from '../DrawerInline
|
|
3
|
+
import { DrawerOverlay } from '../DrawerOverlay';
|
|
4
|
+
import { DrawerInline } from '../DrawerInline';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render Drawer.
|
|
7
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay
|
|
1
|
+
{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n const { type = 'overlay' } = props;\n\n const elementType = type === 'overlay' ? DrawerOverlay : DrawerInline;\n\n return {\n components: {\n root: elementType,\n },\n\n root: slot.always<DrawerProps>(\n slot.resolveShorthand({\n ref,\n ...props,\n }),\n {\n elementType,\n },\n ),\n };\n};\n"],"names":["React","slot","DrawerOverlay","DrawerInline","useDrawer_unstable","props","ref","type","elementType","components","root","always","resolveShorthand"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,SAAS,EAAE,GAAGF;IAE7B,MAAMG,cAAcD,SAAS,YAAYL,gBAAgBC;IAEzD,OAAO;QACLM,YAAY;YACVC,MAAMF;QACR;QAEAE,MAAMT,KAAKU,MAAM,CACfV,KAAKW,gBAAgB,CAAC;YACpBN;YACA,GAAGD,KAAK;QACV,IACA;YACEG;QACF;IAEJ;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n assertSlots<DrawerBodySlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerBody_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerBody_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState) => {\n assertSlots<DrawerFooterSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerFooter_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n return {\n components: {\n root: 'footer',\n },\n\n root: slot.always(\n getNativeElementProps('footer', {\n ref,\n ...props,\n }),\n { elementType: 'footer' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n return {\n components: {\n root: 'footer',\n },\n\n root: slot.always(\n getNativeElementProps('footer', {\n ref,\n ...props,\n }),\n { elementType: 'footer' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,UAAU;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n assertSlots<DrawerHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n assertSlots<DrawerHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n return {\n components: {\n root: 'header',\n },\n\n root: slot.always(\n getNativeElementProps('header', {\n ref,\n ...props,\n }),\n { elementType: 'header' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n return {\n components: {\n root: 'header',\n },\n\n root: slot.always(\n getNativeElementProps('header', {\n ref,\n ...props,\n }),\n { elementType: 'header' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,UAAU;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => {\n assertSlots<DrawerHeaderNavigationSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeaderNavigation_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n props: DrawerHeaderNavigationProps,\n ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n return {\n components: {\n root: 'nav',\n },\n\n root: slot.always(\n getNativeElementProps('nav', {\n ref,\n ...props,\n }),\n { elementType: 'nav' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n props: DrawerHeaderNavigationProps,\n ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n return {\n components: {\n root: 'nav',\n },\n\n root: slot.always(\n getNativeElementProps('nav', {\n ref,\n ...props,\n }),\n { elementType: 'nav' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n assertSlots<DrawerHeaderTitleSlots>(state);\n\n return (\n <state.root>\n {state.heading && <state.heading />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n assertSlots<DrawerHeaderTitleSlots>(state);\n\n return (\n <state.root>\n {state.heading && <state.heading />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\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 let heading = slot.resolveShorthand(props.heading);\n\n if (!heading) {\n heading = {\n children: props.children,\n };\n }\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: slot.optional(getNativeElementProps(heading.as ?? 'h2', heading), {\n defaultProps: {\n children: props.children,\n },\n renderByDefault: true,\n elementType: 'h2',\n }),\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderTitle_unstable","props","ref","heading","resolveShorthand","children","components","root","action","always","elementType","optional","as","defaultProps","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\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 let heading = slot.resolveShorthand(props.heading);\n\n if (!heading) {\n heading = {\n children: props.children,\n };\n }\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: slot.optional(getNativeElementProps(heading.as ?? 'h2', heading), {\n defaultProps: {\n children: props.children,\n },\n renderByDefault: true,\n elementType: 'h2',\n }),\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderTitle_unstable","props","ref","heading","resolveShorthand","children","components","root","action","always","elementType","optional","as","defaultProps","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,IAAIC,UAAUJ,KAAKK,gBAAgB,CAACH,MAAME,OAAO;IAEjD,IAAI,CAACA,SAAS;QACZA,UAAU;YACRE,UAAUJ,MAAMI,QAAQ;QAC1B;IACF;QAgB+CF;IAd/C,OAAO;QACLG,YAAY;YACVC,MAAM;YACNJ,SAAS;YACTK,QAAQ;QACV;QAEAD,MAAMR,KAAKU,MAAM,CACfX,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP,SAASJ,KAAKY,QAAQ,CAACb,sBAAsBK,CAAAA,cAAAA,QAAQS,EAAE,cAAVT,yBAAAA,cAAc,MAAMA,UAAU;YACzEU,cAAc;gBACZR,UAAUJ,MAAMI,QAAQ;YAC1B;YACAS,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQT,KAAKY,QAAQ,CAACV,MAAMO,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseProps, DrawerBaseState } from '../../
|
|
1
|
+
{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type DrawerInlineSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * DrawerInline Props\n */\nexport type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &\n DrawerBaseProps & {\n /**\n * Whether the drawer has a separator line.\n *\n * @default false\n */\n separator?: boolean;\n };\n\n/**\n * State used in rendering DrawerInline\n */\nexport type DrawerInlineState = Required<\n ComponentState<DrawerInlineSlots> & DrawerBaseState & Pick<DrawerInlineProps, 'separator'>\n>;\n"],"names":[],"mappings":"AAAA,WA0BE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n if (!state.motion.canRender) {\n return null;\n }\n\n assertSlots<DrawerInlineSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerInline_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n if (!state.motion.canRender) {\n return null;\n }\n\n assertSlots<DrawerInlineSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerInline_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps,
|
|
2
|
+
import { getNativeElementProps, slot, useControllableState, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useMotion } from '@fluentui/react-motion-preview';
|
|
4
|
-
import { useDrawerDefaultProps } from '../../
|
|
4
|
+
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render DrawerInline.
|
|
7
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps,
|
|
1
|
+
{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useControllableState, 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, ...defaultProps } = useDrawerDefaultProps(props);\n const { separator = false } = props;\n\n const [open] = useControllableState({\n state: defaultProps.open,\n defaultState: defaultProps.defaultOpen,\n initialState: false,\n });\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","useControllableState","useMergedRefs","useMotion","useDrawerDefaultProps","useDrawerInline_unstable","props","ref","size","position","defaultProps","separator","open","state","defaultState","defaultOpen","initialState","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,aAAa,QAAQ,4BAA4B;AAC7G,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,cAAc,GAAGN,sBAAsBE;IAClE,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAM,CAACM,KAAK,GAAGX,qBAAqB;QAClCY,OAAOH,aAAaE,IAAI;QACxBE,cAAcJ,aAAaK,WAAW;QACtCC,cAAc;IAChB;IAEA,MAAMC,SAASd,UAA0BS;IAEzC,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMnB,KAAKoB,MAAM,CACfrB,sBAAsB,OAAO;YAC3B,GAAGO,KAAK;YACRC,KAAKL,cAAcK,KAAKU,OAAOV,GAAG;QACpC,IACA;YAAEc,aAAa;QAAM;QAGvBb;QACAC;QACAE;QACAM;IACF;AACF,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
|
-
import { drawerCSSVars, useDrawerBaseClassNames } from '../../
|
|
4
|
+
import { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
|
|
5
5
|
export const drawerInlineClassNames = {
|
|
6
6
|
root: 'fui-DrawerInline'
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","useDrawerBaseClassNames","drawerInlineClassNames","root","separatorValues","colorNeutralBackground3","useDrawerRootStyles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","useDrawerInlineStyles_unstable","state","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../
|
|
1
|
+
{"version":3,"names":["React","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","useDrawerBaseClassNames","drawerInlineClassNames","root","separatorValues","colorNeutralBackground3","useDrawerRootStyles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","useDrawerInlineStyles_unstable","state","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const separatorValues = [\n '1px',\n 'solid',\n tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n root: {\n position: 'relative',\n opacity: 0,\n transitionProperty: 'opacity, transform',\n willChange: 'opacity, transform'\n },\n /* Separator */ separatorStart: {\n ...shorthands.borderRight(...separatorValues)\n },\n separatorEnd: {\n ...shorthands.borderLeft(...separatorValues)\n },\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n },\n /* Visible */ visible: {\n opacity: 1,\n transform: `translate3D(0, 0, 0)`\n }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const separatorClass = React.useMemo(()=>{\n if (!state.separator) {\n return undefined;\n }\n return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n }, [\n state.position,\n state.separator,\n rootStyles.separatorEnd,\n rootStyles.separatorStart\n ]);\n state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,yCAAyC;AAChG,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPL,MAAM,CAACM,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAd,MAAA;IAAAY,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAuB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,cAAc,GAAGzB,uBAAuB,CAACwB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAGjC,KAAK,CAACkC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAChB,cAAc,GAAGgB,UAAU,CAACZ,YAAY;EAC3F,CAAC,EAAE,CACCU,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,UAAU,CAACZ,YAAY,EACvBY,UAAU,CAAChB,cAAc,CAC5B,CAAC;EACFc,KAAK,CAACtB,IAAI,CAAC8B,SAAS,GAAGpC,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAEuB,cAAc,EAAEC,UAAU,CAACxB,IAAI,EAAEyB,cAAc,EAAED,UAAU,CAACF,KAAK,CAACO,QAAQ,CAAC,EAAEP,KAAK,CAACS,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACL,OAAO,EAAEG,KAAK,CAACtB,IAAI,CAAC8B,SAAS,CAAC;EAC9M,OAAOR,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../
|
|
1
|
+
{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n root: Slot<DialogSurfaceProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n DrawerBaseProps &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Required<\n Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> &\n DrawerBaseState & {\n dialog: DialogProps;\n backdropMotion: MotionState<HTMLDivElement>;\n }\n>;\n"],"names":[],"mappings":"AAAA,WA0BE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\n\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n if (!state.motion.canRender) {\n return null;\n }\n\n assertSlots<DrawerOverlaySlots>(state);\n\n return (\n <Dialog {...state.dialog}>\n <state.root />\n </Dialog>\n );\n};\n"],"names":["assertSlots","Dialog","renderDrawerOverlay_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,yBAAyB;AAIhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAL,YAAgCG;IAEhC,qBACE,KAACF;QAAQ,GAAGE,MAAMG,MAAM;kBACtB,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { DialogSurface } from '@fluentui/react-dialog';
|
|
4
|
-
import { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';
|
|
5
4
|
import { useMotion } from '@fluentui/react-motion-preview';
|
|
5
|
+
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
6
6
|
/**
|
|
7
7
|
* Create the state required to render DrawerOverlay.
|
|
8
8
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { DialogProps, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n props: DrawerOverlayProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n const drawerMotion = useMotion<HTMLDivElement>(open);\n const backdropMotion = useMotion<HTMLDivElement>(open);\n\n const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n\n const root = slot.always<DialogSurfaceProps>(\n getNativeElementProps('div', {\n ...props,\n ref: useMergedRefs(ref, drawerMotion.ref),\n }),\n {\n elementType: DialogSurface,\n defaultProps: {\n backdrop: slot.optional(props.backdrop, {\n elementType: 'div',\n renderByDefault: hasCustomBackdrop,\n defaultProps: {\n ref: backdropMotion.ref,\n },\n }),\n },\n },\n );\n\n const dialog = slot.always(\n {\n open: true,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\n } as DialogProps,\n {\n elementType: 'div',\n },\n );\n\n return {\n components: {\n root: DialogSurface,\n backdrop: 'div',\n },\n\n root,\n\n dialog,\n size,\n position,\n motion: drawerMotion,\n backdropMotion,\n };\n};\n"],"names":["React","getNativeElementProps","slot","useMergedRefs","DialogSurface","useMotion","useDrawerDefaultProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAAsBC,aAAa,QAA4B,yBAAyB;AACxF,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGR;IAE9D,MAAMS,eAAeZ,UAA0BK;IAC/C,MAAMQ,iBAAiBb,UAA0BK;IAEjD,MAAMS,oBAAoBL,cAAc,eAAeN,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOnB,KAAKoB,MAAM,CACtBrB,sBAAsB,OAAO;QAC3B,GAAGO,KAAK;QACRC,KAAKN,cAAcM,KAAKQ,aAAaR,GAAG;IAC1C,IACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUlB,KAAKuB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAASzB,KAAKoB,MAAM,CACxB;QACEZ,MAAM;QACNC;QACAK;QACAD;QACAD;IACF,GACA;QACES,aAAa;IACf;IAGF,OAAO;QACLK,YAAY;YACVP,MAAMjB;YACNgB,UAAU;QACZ;QAEAC;QAEAM;QACAf;QACAC;QACAgB,QAAQZ;QACRC;IACF;AACF,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
|
-
import {
|
|
4
|
+
import { drawerCSSVars, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';
|
|
5
5
|
export const drawerOverlayClassNames = {
|
|
6
6
|
root: 'fui-DrawerOverlay',
|
|
7
7
|
backdrop: 'fui-DrawerOverlay__backdrop'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","__styles","mergeClasses","tokens","
|
|
1
|
+
{"version":3,"names":["React","__styles","mergeClasses","tokens","drawerCSSVars","useDrawerBaseClassNames","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerRootStyles","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","useDrawerOverlayStyles_unstable","state","baseClassNames","rootStyles","backdropMotionStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay',\n backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerRootStyles = makeStyles({\n root: {\n position: 'fixed',\n top: 0,\n bottom: 0,\n opacity: 0,\n boxShadow: '0px transparent',\n transitionProperty: 'transform, box-shadow, opacity',\n willChange: 'transform, box-shadow, opacity'\n },\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n },\n /* Visible */ visible: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)',\n boxShadow: tokens.shadow64\n }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n backdrop: {\n opacity: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n willChange: 'opacity'\n },\n visible: {\n opacity: 1\n }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const backdropMotionStyles = useBackdropMotionStyles();\n const durationStyles = useDrawerDurationStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACzH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAP,MAAA;IAAAK,OAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAqB/B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,uBAAuB,gBAAGtB,QAAA;EAAAQ,QAAA;IAAAK,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAP,KAAA;EAAA;EAAAI,OAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGtB,uBAAuB,CAACqB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGlB,mBAAmB,CAAC,CAAC;EACxC,MAAMmB,oBAAoB,GAAGN,uBAAuB,CAAC,CAAC;EACtD,MAAMO,cAAc,GAAGxB,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGiB,KAAK,CAAClB,IAAI,CAACC,QAAQ;EACpCiB,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEmB,cAAc,EAAEC,UAAU,CAACpB,IAAI,EAAEoB,UAAU,CAACF,KAAK,CAACM,QAAQ,CAAC,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACP,OAAO,EAAEK,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EAC/L,IAAItB,QAAQ,EAAE;IACVA,QAAQ,CAACsB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEoB,oBAAoB,CAACpB,QAAQ,EAAEqB,cAAc,CAACJ,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACU,cAAc,CAACF,MAAM,IAAIL,oBAAoB,CAACR,OAAO,EAAEZ,QAAQ,CAACsB,SAAS,CAAC;EACnN;EACA,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { mount } from '@cypress/react';
|
|
3
|
+
import { FluentProvider } from '@fluentui/react-provider';
|
|
4
|
+
import { webLightTheme } from '@fluentui/react-theme';
|
|
5
|
+
const mountFluent = (element)=>{
|
|
6
|
+
mount(/*#__PURE__*/ React.createElement(FluentProvider, {
|
|
7
|
+
theme: webLightTheme
|
|
8
|
+
}, element));
|
|
9
|
+
};
|
|
10
|
+
export function testDrawerBaseScenarios(Component) {
|
|
11
|
+
describe('basic functionality', ()=>{
|
|
12
|
+
it('should not render any element when closed', ()=>{
|
|
13
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
14
|
+
id: "drawer"
|
|
15
|
+
}));
|
|
16
|
+
cy.get('#drawer').should('not.exist');
|
|
17
|
+
});
|
|
18
|
+
it('should render an element when opened', ()=>{
|
|
19
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
20
|
+
id: "drawer",
|
|
21
|
+
open: true
|
|
22
|
+
}));
|
|
23
|
+
cy.get('#drawer').should('exist');
|
|
24
|
+
});
|
|
25
|
+
it('should render children content', ()=>{
|
|
26
|
+
const content = 'Test the renderization';
|
|
27
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
28
|
+
id: "drawer",
|
|
29
|
+
open: true
|
|
30
|
+
}, content));
|
|
31
|
+
cy.get('#drawer').contains(content);
|
|
32
|
+
});
|
|
33
|
+
it('should toggle visibility on open prop change', ()=>{
|
|
34
|
+
const ExampleDrawer = ()=>{
|
|
35
|
+
const [open, setOpen] = React.useState(false);
|
|
36
|
+
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Component, {
|
|
37
|
+
id: "drawer",
|
|
38
|
+
open: open
|
|
39
|
+
}), /*#__PURE__*/ React.createElement("button", {
|
|
40
|
+
id: "button",
|
|
41
|
+
onClick: ()=>setOpen(true)
|
|
42
|
+
}, "Open"));
|
|
43
|
+
};
|
|
44
|
+
mountFluent(/*#__PURE__*/ React.createElement(ExampleDrawer, null));
|
|
45
|
+
cy.get('#drawer').should('not.exist');
|
|
46
|
+
cy.get('#button').click();
|
|
47
|
+
cy.get('#drawer').should('exist');
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
describe('size prop', ()=>{
|
|
51
|
+
const sizes = {
|
|
52
|
+
small: 320,
|
|
53
|
+
medium: 592,
|
|
54
|
+
large: 940,
|
|
55
|
+
full: 1000
|
|
56
|
+
};
|
|
57
|
+
Object.entries(sizes).forEach(([size, width])=>{
|
|
58
|
+
const sizeProp = size;
|
|
59
|
+
it(`should have correct size when size is ${size}`, ()=>{
|
|
60
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
61
|
+
size: sizeProp,
|
|
62
|
+
id: "drawer",
|
|
63
|
+
open: true
|
|
64
|
+
}));
|
|
65
|
+
cy.viewport(1000, 1000);
|
|
66
|
+
cy.get('#drawer').should('have.css', 'width', width + 'px');
|
|
67
|
+
cy.get('#drawer').invoke('outerWidth').should('equal', width);
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
it('width should not be bigger than viewport', ()=>{
|
|
71
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
72
|
+
id: "drawer",
|
|
73
|
+
open: true
|
|
74
|
+
}));
|
|
75
|
+
cy.viewport(319, 319);
|
|
76
|
+
cy.get('#drawer').should('have.css', 'width', '319px');
|
|
77
|
+
cy.get('#drawer').invoke('outerWidth').should('equal', 319);
|
|
78
|
+
});
|
|
79
|
+
it('should have custom size', ()=>{
|
|
80
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
81
|
+
id: "drawer",
|
|
82
|
+
open: true,
|
|
83
|
+
style: {
|
|
84
|
+
width: '200px'
|
|
85
|
+
}
|
|
86
|
+
}));
|
|
87
|
+
cy.get('#drawer').should('have.css', 'width', '200px');
|
|
88
|
+
cy.get('#drawer').invoke('outerWidth').should('equal', 200);
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
describe('position prop', ()=>{
|
|
92
|
+
const positions = {
|
|
93
|
+
start: 'left',
|
|
94
|
+
end: 'right'
|
|
95
|
+
};
|
|
96
|
+
Object.entries(positions).forEach(([position, side])=>{
|
|
97
|
+
const positionProp = position;
|
|
98
|
+
it(`should have correct position when position is ${position}`, ()=>{
|
|
99
|
+
mountFluent(/*#__PURE__*/ React.createElement(Component, {
|
|
100
|
+
position: positionProp,
|
|
101
|
+
id: "drawer",
|
|
102
|
+
open: true
|
|
103
|
+
}));
|
|
104
|
+
cy.get('#drawer').should('have.css', side, '0px');
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
}
|
|
@@ -0,0 +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';\nimport { DrawerProps } from '@fluentui/react-drawer';\n\nconst mountFluent = (element: JSX.Element) => {\n mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: React.ComponentType<DrawerProps>) {\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 };\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":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","position","side","positionProp"],"mappings":"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"}
|
|
@@ -11,8 +11,8 @@ Object.defineProperty(exports, "useDrawer_unstable", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const _DrawerOverlay = require("../DrawerOverlay
|
|
15
|
-
const _DrawerInline = require("../DrawerInline
|
|
14
|
+
const _DrawerOverlay = require("../DrawerOverlay");
|
|
15
|
+
const _DrawerInline = require("../DrawerInline");
|
|
16
16
|
const useDrawer_unstable = (props, ref)=>{
|
|
17
17
|
const { type = 'overlay' } = props;
|
|
18
18
|
const elementType = type === 'overlay' ? _DrawerOverlay.DrawerOverlay : _DrawerInline.DrawerInline;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay
|
|
1
|
+
{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline';\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */ export const useDrawer_unstable = (props, ref)=>{\n const { type = 'overlay' } = props;\n const elementType = type === 'overlay' ? DrawerOverlay : DrawerInline;\n return {\n components: {\n root: elementType\n },\n root: slot.always(slot.resolveShorthand({\n ref,\n ...props\n }), {\n elementType\n })\n };\n};\n"],"names":["useDrawer_unstable","props","ref","type","elementType","DrawerOverlay","DrawerInline","components","root","slot","always","resolveShorthand"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACF;+BACS;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC;IAC1C,MAAM,EAAEC,OAAO,SAAS,EAAE,GAAGF;IAC7B,MAAMG,cAAcD,SAAS,YAAYE,4BAAa,GAAGC,0BAAY;IACrE,OAAO;QACHC,YAAY;YACRC,MAAMJ;QACV;QACAI,MAAMC,oBAAI,CAACC,MAAM,CAACD,oBAAI,CAACE,gBAAgB,CAAC;YACpCT;YACA,GAAGD,KAAK;QACZ,IAAI;YACAG;QACJ;IACJ;AACJ"}
|
|
@@ -12,7 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
15
|
-
const _useDrawerDefaultProps = require("../../
|
|
15
|
+
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
|
|
16
16
|
const useDrawerInline_unstable = (props, ref)=>{
|
|
17
17
|
const { size, position, ...defaultProps } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
18
18
|
const { separator = false } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps,
|
|
1
|
+
{"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\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 */ export const useDrawerInline_unstable = (props, ref)=>{\n const { size, position, ...defaultProps } = useDrawerDefaultProps(props);\n const { separator = false } = props;\n const [open] = useControllableState({\n state: defaultProps.open,\n defaultState: defaultProps.defaultOpen,\n initialState: false\n });\n const motion = useMotion(open);\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ...props,\n ref: useMergedRefs(ref, motion.ref)\n }), {\n elementType: 'div'\n }),\n size,\n position,\n separator,\n motion\n };\n};\n"],"names":["useDrawerInline_unstable","props","ref","size","position","defaultProps","useDrawerDefaultProps","separator","open","useControllableState","state","defaultState","defaultOpen","initialState","motion","useMotion","components","root","slot","always","getNativeElementProps","useMergedRefs","elementType"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC0D;oCACvD;uCACY;AAS3B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,cAAc,GAAGC,IAAAA,4CAAqB,EAACL;IAClE,MAAM,EAAEM,YAAY,KAAK,EAAE,GAAGN;IAC9B,MAAM,CAACO,KAAK,GAAGC,IAAAA,oCAAoB,EAAC;QAChCC,OAAOL,aAAaG,IAAI;QACxBG,cAAcN,aAAaO,WAAW;QACtCC,cAAc;IAClB;IACA,MAAMC,SAASC,IAAAA,6BAAS,EAACP;IACzB,OAAO;QACHQ,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C,GAAGnB,KAAK;YACRC,KAAKmB,IAAAA,6BAAa,EAACnB,KAAKY,OAAOZ,GAAG;QACtC,IAAI;YACAoB,aAAa;QACjB;QACAnB;QACAC;QACAG;QACAO;IACJ;AACJ"}
|
|
@@ -20,7 +20,7 @@ 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 _reacttheme = require("@fluentui/react-theme");
|
|
23
|
-
const _useDrawerBaseStylesstyles = require("../../
|
|
23
|
+
const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
|
|
24
24
|
const drawerInlineClassNames = {
|
|
25
25
|
root: 'fui-DrawerInline'
|
|
26
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../
|
|
1
|
+
{"version":3,"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f10pi13n\",\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f15rjlgw\",\n Es3by: \"f1blt7p\"\n },\n separatorStart: {\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n },\n separatorEnd: {\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1h1g6jt\"\n },\n visible: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\"\n }\n}, {\n d: [\".f10pi13n{position:relative;}\", \".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".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);}\"]\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */\nexport const useDrawerInlineStyles_unstable = state => {\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const separatorClass = React.useMemo(() => {\n if (!state.separator) {\n return undefined;\n }\n return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);\n state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerInlineStyles.styles.js.map"],"names":["drawerInlineClassNames","useDrawerInlineStyles_unstable","root","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","state","baseClassNames","useDrawerBaseClassNames","rootStyles","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses","motion","active"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAwCAC,8BAA8B;eAA9BA;;;;iEA5CU;wBAC4B;4BAC5B;2CACgC;AAChD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDL,MAAM;QACJM,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPd,QAAQ;QACRY,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAAiC;QAAwB;QAAqD;QAA4C;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;QAAoE;QAAwB;KAA4C;AAC9oB;AAIO,MAAMvB,iCAAiCwB,CAAAA;IAC5C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,aAAatB;IACnB,MAAMuB,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,CAACN,MAAMO,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,OAAOR,MAAMS,QAAQ,KAAK,UAAUN,WAAWhB,cAAc,GAAGgB,WAAWZ,YAAY;IACzF,GAAG;QAACS,MAAMS,QAAQ;QAAET,MAAMO,SAAS;QAAEJ,WAAWZ,YAAY;QAAEY,WAAWhB,cAAc;KAAC;IACxFa,MAAMvB,IAAI,CAACiC,SAAS,GAAGC,IAAAA,oBAAY,EAACpC,uBAAuBE,IAAI,EAAEwB,gBAAgBE,WAAW1B,IAAI,EAAE2B,gBAAgBD,UAAU,CAACH,MAAMS,QAAQ,CAAC,EAAET,MAAMY,MAAM,CAACC,MAAM,IAAIV,WAAWL,OAAO,EAAEE,MAAMvB,IAAI,CAACiC,SAAS;IAC7M,OAAOV;AACT,GACA,wDAAwD"}
|
|
@@ -12,8 +12,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _reactdialog = require("@fluentui/react-dialog");
|
|
15
|
-
const _useDrawerDefaultProps = require("../../util/useDrawerDefaultProps");
|
|
16
15
|
const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
16
|
+
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
|
|
17
17
|
const useDrawerOverlay_unstable = (props, ref)=>{
|
|
18
18
|
const { open, defaultOpen, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
19
19
|
const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n const drawerMotion = useMotion(open);\n const backdropMotion = useMotion(open);\n const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n const root = slot.always(getNativeElementProps('div', {\n ...props,\n ref: useMergedRefs(ref, drawerMotion.ref)\n }), {\n elementType: DialogSurface,\n defaultProps: {\n backdrop: slot.optional(props.backdrop, {\n elementType: 'div',\n renderByDefault: hasCustomBackdrop,\n defaultProps: {\n ref: backdropMotion.ref\n }\n })\n }\n });\n const dialog = slot.always({\n open: true,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType\n }, {\n elementType: 'div'\n });\n return {\n components: {\n root: DialogSurface,\n backdrop: 'div'\n },\n root,\n dialog,\n size,\n position,\n motion: drawerMotion,\n backdropMotion\n };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","onOpenChange","drawerMotion","useMotion","backdropMotion","hasCustomBackdrop","backdrop","root","slot","always","getNativeElementProps","useMergedRefs","elementType","DialogSurface","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACoC;6BAC7B;oCACJ;uCACY;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACN;IACpE,MAAM,EAAEO,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGT;IAC9D,MAAMU,eAAeC,IAAAA,6BAAS,EAACT;IAC/B,MAAMU,iBAAiBD,IAAAA,6BAAS,EAACT;IACjC,MAAMW,oBAAoBN,cAAc,eAAeP,MAAMc,QAAQ,KAAK;IAC1E,MAAMC,OAAOC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;QAClD,GAAGlB,KAAK;QACRC,KAAKkB,IAAAA,6BAAa,EAAClB,KAAKS,aAAaT,GAAG;IAC5C,IAAI;QACAmB,aAAaC,0BAAa;QAC1BC,cAAc;YACVR,UAAUE,oBAAI,CAACO,QAAQ,CAACvB,MAAMc,QAAQ,EAAE;gBACpCM,aAAa;gBACbI,iBAAiBX;gBACjBS,cAAc;oBACVrB,KAAKW,eAAeX,GAAG;gBAC3B;YACJ;QACJ;IACJ;IACA,MAAMwB,SAAST,oBAAI,CAACC,MAAM,CAAC;QACvBf,MAAM;QACNC;QACAM;QACAD;QACAD;IACJ,GAAG;QACCa,aAAa;IACjB;IACA,OAAO;QACHM,YAAY;YACRX,MAAMM,0BAAa;YACnBP,UAAU;QACd;QACAC;QACAU;QACArB;QACAC;QACAsB,QAAQjB;QACRE;IACJ;AACJ"}
|
|
@@ -19,7 +19,7 @@ _export(exports, {
|
|
|
19
19
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
20
20
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
21
21
|
const _react1 = require("@griffel/react");
|
|
22
|
-
const _useDrawerBaseStylesstyles = require("../../
|
|
22
|
+
const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
|
|
23
23
|
const drawerOverlayClassNames = {
|
|
24
24
|
root: 'fui-DrawerOverlay',
|
|
25
25
|
backdrop: 'fui-DrawerOverlay__backdrop'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay',\n backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f19dog8a\",\n Bhzewxz: \"f15twtuk\",\n B5kzvoi: \"f1yab3r1\",\n abs64n: \"fk73vx1\",\n E5pizo: \"fliqkoi\",\n Bmy1vo4: \"f1neo61\",\n Es3by: \"f1ytgekk\"\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1g0pcr8\"\n },\n visible: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\",\n E5pizo: \"f10nrhrw\"\n }\n}, {\n d: [\".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".fk73vx1{opacity:0;}\", \".fliqkoi{box-shadow:0px transparent;}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropMotionStyles = /*#__PURE__*/__styles({\n backdrop: {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f13u1uyl\",\n Bkqvd7p: \"f17wnm97\",\n Es3by: \"f1gqqdtu\"\n },\n visible: {\n abs64n: \"f5p0z4x\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const backdropMotionStyles = useBackdropMotionStyles();\n const durationStyles = useDrawerDurationStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useDrawerRootStyles","__styles","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","rootStyles","backdropMotionStyles","durationStyles","useDrawerDurationStyles","className","mergeClasses","position","motion","active","size","backdropMotion"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAkDAC,+BAA+B;eAA/BA;;;;iEAtDU;wBACgB;2CAEyC;AACzE,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDH,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPP,QAAQ;QACRK,SAAS;QACTJ,QAAQ;IACV;AACF,GAAG;IACDO,GAAG;QAAC;QAA8B;QAAqB;QAAwB;QAAwB;QAAyC;QAA+D;QAAwD;QAA+E;QAA8E;QAAwB;QAA6C;KAAyC;AACphB;AACA;;CAEC,GACD,MAAMC,0BAA0B,WAAW,GAAEb,IAAAA,gBAAQ,EAAC;IACpDF,UAAU;QACRM,QAAQ;QACRE,SAAS;QACTQ,SAAS;QACTP,OAAO;IACT;IACAI,SAAS;QACPP,QAAQ;IACV;AACF,GAAG;IACDQ,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMhB,kCAAkCmB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,aAAanB;IACnB,MAAMoB,uBAAuBN;IAC7B,MAAMO,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMvB,WAAWiB,MAAMlB,IAAI,CAACC,QAAQ;IACpCiB,MAAMlB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,oBAAY,EAAC5B,wBAAwBE,IAAI,EAAEmB,gBAAgBE,WAAWrB,IAAI,EAAEqB,UAAU,CAACH,MAAMS,QAAQ,CAAC,EAAET,MAAMU,MAAM,CAACC,MAAM,IAAIR,WAAWP,OAAO,EAAEI,MAAMlB,IAAI,CAACyB,SAAS;IAC9L,IAAIxB,UAAU;QACZA,SAASwB,SAAS,GAAGC,IAAAA,oBAAY,EAAC5B,wBAAwBG,QAAQ,EAAEqB,qBAAqBrB,QAAQ,EAAEsB,cAAc,CAACL,MAAMY,IAAI,CAAC,EAAEZ,MAAMa,cAAc,CAACF,MAAM,IAAIP,qBAAqBR,OAAO,EAAEb,SAASwB,SAAS;IAChN;IACA,OAAOP;AACT,GACA,yDAAyD"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "testDrawerBaseScenarios", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return testDrawerBaseScenarios;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _react1 = require("@cypress/react");
|
|
14
|
+
const _reactprovider = require("@fluentui/react-provider");
|
|
15
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
16
|
+
const mountFluent = (element)=>{
|
|
17
|
+
(0, _react1.mount)(/*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
|
|
18
|
+
theme: _reacttheme.webLightTheme
|
|
19
|
+
}, element));
|
|
20
|
+
};
|
|
21
|
+
function testDrawerBaseScenarios(Component) {
|
|
22
|
+
describe('basic functionality', ()=>{
|
|
23
|
+
it('should not render any element when closed', ()=>{
|
|
24
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
25
|
+
id: "drawer"
|
|
26
|
+
}));
|
|
27
|
+
cy.get('#drawer').should('not.exist');
|
|
28
|
+
});
|
|
29
|
+
it('should render an element when opened', ()=>{
|
|
30
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
31
|
+
id: "drawer",
|
|
32
|
+
open: true
|
|
33
|
+
}));
|
|
34
|
+
cy.get('#drawer').should('exist');
|
|
35
|
+
});
|
|
36
|
+
it('should render children content', ()=>{
|
|
37
|
+
const content = 'Test the renderization';
|
|
38
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
39
|
+
id: "drawer",
|
|
40
|
+
open: true
|
|
41
|
+
}, content));
|
|
42
|
+
cy.get('#drawer').contains(content);
|
|
43
|
+
});
|
|
44
|
+
it('should toggle visibility on open prop change', ()=>{
|
|
45
|
+
const ExampleDrawer = ()=>{
|
|
46
|
+
const [open, setOpen] = _react.useState(false);
|
|
47
|
+
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(Component, {
|
|
48
|
+
id: "drawer",
|
|
49
|
+
open: open
|
|
50
|
+
}), /*#__PURE__*/ _react.createElement("button", {
|
|
51
|
+
id: "button",
|
|
52
|
+
onClick: ()=>setOpen(true)
|
|
53
|
+
}, "Open"));
|
|
54
|
+
};
|
|
55
|
+
mountFluent(/*#__PURE__*/ _react.createElement(ExampleDrawer, null));
|
|
56
|
+
cy.get('#drawer').should('not.exist');
|
|
57
|
+
cy.get('#button').click();
|
|
58
|
+
cy.get('#drawer').should('exist');
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
describe('size prop', ()=>{
|
|
62
|
+
const sizes = {
|
|
63
|
+
small: 320,
|
|
64
|
+
medium: 592,
|
|
65
|
+
large: 940,
|
|
66
|
+
full: 1000
|
|
67
|
+
};
|
|
68
|
+
Object.entries(sizes).forEach(([size, width])=>{
|
|
69
|
+
const sizeProp = size;
|
|
70
|
+
it(`should have correct size when size is ${size}`, ()=>{
|
|
71
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
72
|
+
size: sizeProp,
|
|
73
|
+
id: "drawer",
|
|
74
|
+
open: true
|
|
75
|
+
}));
|
|
76
|
+
cy.viewport(1000, 1000);
|
|
77
|
+
cy.get('#drawer').should('have.css', 'width', width + 'px');
|
|
78
|
+
cy.get('#drawer').invoke('outerWidth').should('equal', width);
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
it('width should not be bigger than viewport', ()=>{
|
|
82
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
83
|
+
id: "drawer",
|
|
84
|
+
open: true
|
|
85
|
+
}));
|
|
86
|
+
cy.viewport(319, 319);
|
|
87
|
+
cy.get('#drawer').should('have.css', 'width', '319px');
|
|
88
|
+
cy.get('#drawer').invoke('outerWidth').should('equal', 319);
|
|
89
|
+
});
|
|
90
|
+
it('should have custom size', ()=>{
|
|
91
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
92
|
+
id: "drawer",
|
|
93
|
+
open: true,
|
|
94
|
+
style: {
|
|
95
|
+
width: '200px'
|
|
96
|
+
}
|
|
97
|
+
}));
|
|
98
|
+
cy.get('#drawer').should('have.css', 'width', '200px');
|
|
99
|
+
cy.get('#drawer').invoke('outerWidth').should('equal', 200);
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
describe('position prop', ()=>{
|
|
103
|
+
const positions = {
|
|
104
|
+
start: 'left',
|
|
105
|
+
end: 'right'
|
|
106
|
+
};
|
|
107
|
+
Object.entries(positions).forEach(([position, side])=>{
|
|
108
|
+
const positionProp = position;
|
|
109
|
+
it(`should have correct position when position is ${position}`, ()=>{
|
|
110
|
+
mountFluent(/*#__PURE__*/ _react.createElement(Component, {
|
|
111
|
+
position: positionProp,
|
|
112
|
+
id: "drawer",
|
|
113
|
+
open: true
|
|
114
|
+
}));
|
|
115
|
+
cy.get('#drawer').should('have.css', side, '0px');
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["DrawerShared.js"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nconst mountFluent = (element)=>{\n mount(/*#__PURE__*/ React.createElement(FluentProvider, {\n theme: webLightTheme\n }, element));\n};\nexport function testDrawerBaseScenarios(Component) {\n describe('basic functionality', ()=>{\n it('should not render any element when closed', ()=>{\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n id: \"drawer\"\n }));\n cy.get('#drawer').should('not.exist');\n });\n it('should render an element when opened', ()=>{\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n id: \"drawer\",\n open: true\n }));\n cy.get('#drawer').should('exist');\n });\n it('should render children content', ()=>{\n const content = 'Test the renderization';\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n id: \"drawer\",\n open: true\n }, content));\n cy.get('#drawer').contains(content);\n });\n it('should toggle visibility on open prop change', ()=>{\n const ExampleDrawer = ()=>{\n const [open, setOpen] = React.useState(false);\n return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Component, {\n id: \"drawer\",\n open: open\n }), /*#__PURE__*/ React.createElement(\"button\", {\n id: \"button\",\n onClick: ()=>setOpen(true)\n }, \"Open\"));\n };\n mountFluent(/*#__PURE__*/ React.createElement(ExampleDrawer, null));\n cy.get('#drawer').should('not.exist');\n cy.get('#button').click();\n cy.get('#drawer').should('exist');\n });\n });\n describe('size prop', ()=>{\n const sizes = {\n small: 320,\n medium: 592,\n large: 940,\n full: 1000\n };\n Object.entries(sizes).forEach(([size, width])=>{\n const sizeProp = size;\n it(`should have correct size when size is ${size}`, ()=>{\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n size: sizeProp,\n id: \"drawer\",\n open: true\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 it('width should not be bigger than viewport', ()=>{\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n id: \"drawer\",\n open: true\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 it('should have custom size', ()=>{\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n id: \"drawer\",\n open: true,\n style: {\n width: '200px'\n }\n }));\n cy.get('#drawer').should('have.css', 'width', '200px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n });\n });\n describe('position prop', ()=>{\n const positions = {\n start: 'left',\n end: 'right'\n };\n Object.entries(positions).forEach(([position, side])=>{\n const positionProp = position;\n it(`should have correct position when position is ${position}`, ()=>{\n mountFluent(/*#__PURE__*/ React.createElement(Component, {\n position: positionProp,\n id: \"drawer\",\n open: true\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","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","position","side","positionProp"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.22",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.6.
|
|
39
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
40
|
-
"@fluentui/react-motion-preview": "^0.2.
|
|
38
|
+
"@fluentui/react-dialog": "^9.6.2",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.5",
|
|
40
|
+
"@fluentui/react-motion-preview": "^0.2.1",
|
|
41
41
|
"@fluentui/react-shared-contexts": "^9.7.3",
|
|
42
42
|
"@fluentui/react-theme": "^9.1.12",
|
|
43
|
-
"@fluentui/react-utilities": "^9.13.
|
|
43
|
+
"@fluentui/react-utilities": "^9.13.2",
|
|
44
44
|
"@griffel/react": "^1.5.14",
|
|
45
45
|
"@swc/helpers": "^0.5.1"
|
|
46
46
|
},
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|