@fluentui/react-drawer 9.0.0-beta.2 → 9.0.0-beta.4
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 +49 -1
- package/CHANGELOG.md +23 -2
- package/dist/index.d.ts +8 -7
- package/lib/components/Drawer/Drawer.types.js.map +1 -1
- package/lib/components/DrawerInline/DrawerInline.types.js.map +1 -1
- package/lib/components/DrawerOverlay/DrawerOverlay.types.js.map +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlay.js +2 -1
- package/lib/components/DrawerOverlay/useDrawerOverlay.js.map +1 -1
- package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js +7 -1
- package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map +1 -1
- package/lib/util/DrawerBase.types.js.map +1 -1
- package/lib/util/getDefaultDrawerProps.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js +2 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js.map +1 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js +8 -1
- package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,55 @@
|
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 27 Jun 2023 11:19:44 GMT",
|
|
6
|
+
"tag": "@fluentui/react-drawer_v9.0.0-beta.4",
|
|
7
|
+
"version": "9.0.0-beta.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-drawer",
|
|
13
|
+
"comment": "Bump @fluentui/react-dialog to v9.5.12",
|
|
14
|
+
"commit": "1c7e6451a11fb9c59e344df616394a320e8031c4"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Mon, 26 Jun 2023 09:53:54 GMT",
|
|
21
|
+
"tag": "@fluentui/react-drawer_v9.0.0-beta.3",
|
|
22
|
+
"version": "9.0.0-beta.3",
|
|
23
|
+
"comments": {
|
|
24
|
+
"prerelease": [
|
|
25
|
+
{
|
|
26
|
+
"author": "marcosvmmoura@gmail.com",
|
|
27
|
+
"package": "@fluentui/react-drawer",
|
|
28
|
+
"commit": "a47ce5f6b2cede1df976530eb35e86bd7e44a21a",
|
|
29
|
+
"comment": "docs: improve types descriptions and fix TS circular references"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-drawer",
|
|
34
|
+
"comment": "Bump @fluentui/react-dialog to v9.5.11",
|
|
35
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-drawer",
|
|
40
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8",
|
|
41
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-drawer",
|
|
46
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.4",
|
|
47
|
+
"commit": "3e47257676ace0598b9ed336a54befd4d063c332"
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"date": "Tue, 20 Jun 2023 12:39:07 GMT",
|
|
6
54
|
"tag": "@fluentui/react-drawer_v9.0.0-beta.2",
|
|
7
55
|
"version": "9.0.0-beta.2",
|
|
8
56
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 27 Jun 2023 11:19:44 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.4)
|
|
8
|
+
|
|
9
|
+
Tue, 27 Jun 2023 11:19:44 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.3..@fluentui/react-drawer_v9.0.0-beta.4)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-dialog to v9.5.12 ([PR #28291](https://github.com/microsoft/fluentui/pull/28291) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.3)
|
|
17
|
+
|
|
18
|
+
Mon, 26 Jun 2023 09:53:54 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.2..@fluentui/react-drawer_v9.0.0-beta.3)
|
|
20
|
+
|
|
21
|
+
### Changes
|
|
22
|
+
|
|
23
|
+
- docs: improve types descriptions and fix TS circular references ([PR #28282](https://github.com/microsoft/fluentui/pull/28282) by marcosvmmoura@gmail.com)
|
|
24
|
+
- Bump @fluentui/react-dialog to v9.5.11 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
25
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.9.4 ([PR #28296](https://github.com/microsoft/fluentui/pull/28296) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.2)
|
|
8
29
|
|
|
9
|
-
Tue, 20 Jun 2023 12:
|
|
30
|
+
Tue, 20 Jun 2023 12:39:07 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.1..@fluentui/react-drawer_v9.0.0-beta.2)
|
|
11
32
|
|
|
12
33
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
|
|
|
4
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
5
|
import { DialogProps } from '@fluentui/react-dialog';
|
|
6
6
|
import { DialogSurfaceProps } from '@fluentui/react-dialog';
|
|
7
|
+
import { DialogSurfaceSlots } from '@fluentui/react-dialog';
|
|
7
8
|
import { DialogTitleSlots } from '@fluentui/react-dialog';
|
|
8
9
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
9
10
|
import * as React_2 from 'react';
|
|
@@ -15,7 +16,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
15
16
|
*/
|
|
16
17
|
export declare const Drawer: ForwardRefComponent<DrawerProps>;
|
|
17
18
|
|
|
18
|
-
declare type
|
|
19
|
+
declare type DrawerBaseProps = {
|
|
19
20
|
/**
|
|
20
21
|
* Position of the drawer.
|
|
21
22
|
*
|
|
@@ -181,7 +182,7 @@ export declare const drawerInlineClassNames: SlotClassNames<DrawerInlineSlots>;
|
|
|
181
182
|
/**
|
|
182
183
|
* DrawerInline Props
|
|
183
184
|
*/
|
|
184
|
-
export declare type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &
|
|
185
|
+
export declare type DrawerInlineProps = ComponentProps<DrawerInlineSlots> & DrawerBaseProps & {
|
|
185
186
|
/**
|
|
186
187
|
* Whether the drawer has a separator line.
|
|
187
188
|
*
|
|
@@ -197,7 +198,7 @@ export declare type DrawerInlineSlots = {
|
|
|
197
198
|
/**
|
|
198
199
|
* State used in rendering DrawerInline
|
|
199
200
|
*/
|
|
200
|
-
export declare type DrawerInlineState = ComponentState<DrawerInlineSlots> &
|
|
201
|
+
export declare type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;
|
|
201
202
|
|
|
202
203
|
/**
|
|
203
204
|
* DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.
|
|
@@ -209,23 +210,23 @@ export declare const drawerOverlayClassNames: SlotClassNames<DrawerOverlaySlots>
|
|
|
209
210
|
/**
|
|
210
211
|
* DrawerOverlay Props
|
|
211
212
|
*/
|
|
212
|
-
export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &
|
|
213
|
+
export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & DrawerBaseProps & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;
|
|
213
214
|
|
|
214
|
-
export declare type DrawerOverlaySlots = {
|
|
215
|
+
export declare type DrawerOverlaySlots = DialogSurfaceSlots & {
|
|
215
216
|
root: Slot<DialogSurfaceProps>;
|
|
216
217
|
};
|
|
217
218
|
|
|
218
219
|
/**
|
|
219
220
|
* State used in rendering DrawerOverlay
|
|
220
221
|
*/
|
|
221
|
-
export declare type DrawerOverlayState = ComponentState<DrawerOverlaySlots> &
|
|
222
|
+
export declare type DrawerOverlayState = ComponentState<DrawerOverlaySlots> & DrawerBaseProps & {
|
|
222
223
|
dialog: DialogProps;
|
|
223
224
|
};
|
|
224
225
|
|
|
225
226
|
/**
|
|
226
227
|
* Drawer Props
|
|
227
228
|
*/
|
|
228
|
-
export declare type DrawerProps = ComponentProps<Partial<DrawerSlots>> &
|
|
229
|
+
export declare type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
|
|
229
230
|
/**
|
|
230
231
|
* Type of the drawer.
|
|
231
232
|
* @default overlay
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerOverlayProps } from '../DrawerOverlay/DrawerOverlay.types';\nimport { DrawerInlineProps } from '../DrawerInline/DrawerInline.types';\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<Partial<DrawerSlots>>
|
|
1
|
+
{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerOverlayProps } from '../DrawerOverlay/DrawerOverlay.types';\nimport { DrawerInlineProps } from '../DrawerInline/DrawerInline.types';\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<Partial<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,WA4BsD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseProps } from '../../util/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 = ComponentState<DrawerInlineSlots> & DrawerInlineProps;\n"],"names":[],"mappings":"AAAA,WAuBsF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport {
|
|
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 { DrawerBaseProps } from '../../util/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 = ComponentState<DrawerOverlaySlots> &\n DrawerBaseProps & {\n dialog: DialogProps;\n };\n"],"names":[],"mappings":"AAAA,WAqBI"}
|
|
@@ -15,7 +15,8 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
|
|
|
15
15
|
const { modalType ='modal' , inertTrapFocus , onOpenChange } = props;
|
|
16
16
|
return {
|
|
17
17
|
components: {
|
|
18
|
-
root: DialogSurface
|
|
18
|
+
root: DialogSurface,
|
|
19
|
+
backdrop: 'div'
|
|
19
20
|
},
|
|
20
21
|
root: getNativeElementProps('div', {
|
|
21
22
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\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 HTMLElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n props: DrawerOverlayProps,\n ref: React.Ref<HTMLElement>,\n): DrawerOverlayState => {\n const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);\n const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n return {\n components: {\n root: DialogSurface,\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n dialog: {\n open,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\n } as DialogProps,\n\n size,\n position,\n };\n};\n"],"names":["React","getNativeElementProps","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAAsBC,aAAa,QAAQ,yBAAyB;AACpE,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,WAAY,QAAO,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGR;IAE9D,OAAO;QACLS,YAAY;YACVC,MAAMb;
|
|
1
|
+
{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\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 HTMLElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n props: DrawerOverlayProps,\n ref: React.Ref<HTMLElement>,\n): DrawerOverlayState => {\n const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);\n const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n return {\n components: {\n root: DialogSurface,\n backdrop: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n dialog: {\n open,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType,\n } as DialogProps,\n\n size,\n position,\n };\n};\n"],"names":["React","getNativeElementProps","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","backdrop","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAAsBC,aAAa,QAAQ,yBAAyB;AACpE,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,WAAY,QAAO,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGR;IAE9D,OAAO;QACLS,YAAY;YACVC,MAAMb;YACNc,UAAU;QACZ;QAEAD,MAAMd,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAY,QAAQ;YACNV;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
|
|
3
|
+
import * as React from 'react';
|
|
3
4
|
export const drawerOverlayClassNames = {
|
|
4
|
-
root: 'fui-DrawerOverlay'
|
|
5
|
+
root: 'fui-DrawerOverlay',
|
|
6
|
+
backdrop: 'fui-DrawerOverlay__backdrop'
|
|
5
7
|
};
|
|
6
8
|
/**
|
|
7
9
|
* Styles for the root slot
|
|
@@ -21,7 +23,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
21
23
|
export const useDrawerOverlayStyles_unstable = state => {
|
|
22
24
|
const baseStyles = useDrawerBaseStyles();
|
|
23
25
|
const styles = useStyles();
|
|
26
|
+
const backdrop = state.root.backdrop;
|
|
24
27
|
state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);
|
|
28
|
+
if (backdrop) {
|
|
29
|
+
backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);
|
|
30
|
+
}
|
|
25
31
|
return state;
|
|
26
32
|
};
|
|
27
33
|
//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useDrawerBaseStyles","drawerOverlayClassNames","root","useStyles","qhf8xq","Bhzewxz","B5kzvoi","d","useDrawerOverlayStyles_unstable","state","baseStyles","styles","className","size","position"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'fixed',\n top: 0,\n bottom: 0\n }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n const baseStyles = useDrawerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useDrawerBaseStyles","React","drawerOverlayClassNames","root","backdrop","useStyles","qhf8xq","Bhzewxz","B5kzvoi","d","useDrawerOverlayStyles_unstable","state","baseStyles","styles","className","size","position"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport * as React from 'react';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay',\n backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'fixed',\n top: 0,\n bottom: 0\n }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n const baseStyles = useDrawerBaseStyles();\n const styles = useStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,UAAU,GAAGZ,mBAAmB,CAAC,CAAC;EACxC,MAAMa,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMD,QAAQ,GAAGO,KAAK,CAACR,IAAI,CAACC,QAAQ;EACpCO,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGf,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAES,UAAU,CAACT,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEQ,KAAK,CAACI,IAAI,IAAIH,UAAU,CAACD,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACK,QAAQ,IAAIJ,UAAU,CAACD,KAAK,CAACK,QAAQ,CAAC,EAAEL,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EACzM,IAAIV,QAAQ,EAAE;IACVA,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACG,uBAAuB,CAACE,QAAQ,EAAEA,QAAQ,CAACU,SAAS,CAAC;EAC3F;EACA,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["export type
|
|
1
|
+
{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["export type DrawerBaseProps = {\n /**\n * Position of the drawer.\n *\n * @default 'left'\n */\n position?: 'left' | 'right';\n\n /**\n * Size of the drawer.\n *\n * - 'small' - Drawer is 320px wide.\n * - 'medium' - Drawer is 592px wide.\n * - 'large' - Drawer is 940px wide.\n * - 'full' - Drawer is 100vw wide.\n *\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large' | 'full';\n\n /**\n * Controls the open state of the Drawer\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Default value for the uncontrolled open state of the Drawer.\n *\n * @default false\n */\n defaultOpen?: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAiCE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["getDefaultDrawerProps.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["getDefaultDrawerProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function getDefaultDrawerProps(props: DrawerBaseProps) {\n const { open = false, defaultOpen = false, size = 'small', position = 'left' } = props;\n\n return {\n size,\n position,\n open,\n defaultOpen,\n };\n}\n"],"names":["getDefaultDrawerProps","props","open","defaultOpen","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB,EAAE;IAC5D,MAAM,EAAEC,MAAO,KAAK,CAAA,EAAEC,aAAc,KAAK,CAAA,EAAEC,MAAO,QAAO,EAAEC,UAAW,OAAM,EAAE,GAAGJ;IAEjF,OAAO;QACLG;QACAC;QACAH;QACAC;IACF;AACF,CAAC"}
|
|
@@ -16,7 +16,8 @@ const useDrawerOverlay_unstable = (props, ref)=>{
|
|
|
16
16
|
const { modalType ='modal' , inertTrapFocus , onOpenChange } = props;
|
|
17
17
|
return {
|
|
18
18
|
components: {
|
|
19
|
-
root: _reactDialog.DialogSurface
|
|
19
|
+
root: _reactDialog.DialogSurface,
|
|
20
|
+
backdrop: 'div'
|
|
20
21
|
},
|
|
21
22
|
root: (0, _reactUtilities.getNativeElementProps)('div', {
|
|
22
23
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\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 HTMLElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n const { open , defaultOpen , size , position } = getDefaultDrawerProps(props);\n const { modalType ='modal' , inertTrapFocus , onOpenChange } = props;\n return {\n components: {\n root: DialogSurface\n },\n root: getNativeElementProps('div', {\n ref,\n ...props\n }),\n dialog: {\n open,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType\n },\n size,\n position\n };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","getDefaultDrawerProps","modalType","inertTrapFocus","onOpenChange","components","root","DialogSurface","getNativeElementProps","dialog"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACe;6BACR;uCACQ;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,KAAI,EAAGC,YAAW,EAAGC,KAAI,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACN;IACxE,MAAM,EAAEO,WAAW,QAAO,EAAGC,eAAc,EAAGC,aAAY,EAAG,GAAGT;IAChE,OAAO;QACHU,YAAY;YACRC,MAAMC,0BAAa;
|
|
1
|
+
{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\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 HTMLElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n const { open , defaultOpen , size , position } = getDefaultDrawerProps(props);\n const { modalType ='modal' , inertTrapFocus , onOpenChange } = props;\n return {\n components: {\n root: DialogSurface,\n backdrop: 'div'\n },\n root: getNativeElementProps('div', {\n ref,\n ...props\n }),\n dialog: {\n open,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType\n },\n size,\n position\n };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","getDefaultDrawerProps","modalType","inertTrapFocus","onOpenChange","components","root","DialogSurface","backdrop","getNativeElementProps","dialog"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACe;6BACR;uCACQ;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,KAAI,EAAGC,YAAW,EAAGC,KAAI,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACN;IACxE,MAAM,EAAEO,WAAW,QAAO,EAAGC,eAAc,EAAGC,aAAY,EAAG,GAAGT;IAChE,OAAO;QACHU,YAAY;YACRC,MAAMC,0BAAa;YACnBC,UAAU;QACd;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YAC/Bb;YACA,GAAGD,KAAK;QACZ;QACAe,QAAQ;YACJb;YACAC;YACAM;YACAD;YACAD;QACJ;QACAH;QACAC;IACJ;AACJ"}
|
|
@@ -12,10 +12,13 @@ _export(exports, {
|
|
|
12
12
|
drawerOverlayClassNames: ()=>drawerOverlayClassNames,
|
|
13
13
|
useDrawerOverlayStyles_unstable: ()=>useDrawerOverlayStyles_unstable
|
|
14
14
|
});
|
|
15
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
15
16
|
const _react = require("@griffel/react");
|
|
16
17
|
const _useDrawerBaseStylesStyles = require("../../util/useDrawerBaseStyles.styles");
|
|
18
|
+
const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
17
19
|
const drawerOverlayClassNames = {
|
|
18
|
-
root: 'fui-DrawerOverlay'
|
|
20
|
+
root: 'fui-DrawerOverlay',
|
|
21
|
+
backdrop: 'fui-DrawerOverlay__backdrop'
|
|
19
22
|
};
|
|
20
23
|
/**
|
|
21
24
|
* Styles for the root slot
|
|
@@ -35,6 +38,10 @@ const drawerOverlayClassNames = {
|
|
|
35
38
|
const useDrawerOverlayStyles_unstable = (state)=>{
|
|
36
39
|
const baseStyles = (0, _useDrawerBaseStylesStyles.useDrawerBaseStyles)();
|
|
37
40
|
const styles = useStyles();
|
|
41
|
+
const backdrop = state.root.backdrop;
|
|
38
42
|
state.root.className = (0, _react.mergeClasses)(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);
|
|
43
|
+
if (backdrop) {
|
|
44
|
+
backdrop.className = (0, _react.mergeClasses)(drawerOverlayClassNames.backdrop, backdrop.className);
|
|
45
|
+
}
|
|
39
46
|
return state;
|
|
40
47
|
}; //# sourceMappingURL=useDrawerOverlayStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f19dog8a\",\n Bhzewxz: \"f15twtuk\",\n B5kzvoi: \"f1yab3r1\"\n }\n}, {\n d: [\".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\"]\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n const baseStyles = useDrawerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","useStyles","__styles","qhf8xq","Bhzewxz","B5kzvoi","d","state","baseStyles","useDrawerBaseStyles","styles","className","mergeClasses","size","position"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport * as React from 'react';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay',\n backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f19dog8a\",\n Bhzewxz: \"f15twtuk\",\n B5kzvoi: \"f1yab3r1\"\n }\n}, {\n d: [\".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\"]\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n const baseStyles = useDrawerBaseStyles();\n const styles = useStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useStyles","__styles","qhf8xq","Bhzewxz","B5kzvoi","d","state","baseStyles","useDrawerBaseStyles","styles","className","mergeClasses","size","position"],"mappings":";;;;;;;;;;;IAGaA,uBAAuB,MAAvBA;IAmBAC,+BAA+B,MAA/BA;;;uBAtB0B;2CACH;8DACb;AAChB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCH,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA8B;QAAqB;KAAuB;AAChF;AAIO,MAAMR,kCAAkCS,CAAAA,QAAS;IACtD,MAAMC,aAAaC,IAAAA,8CAAmB;IACtC,MAAMC,SAAST;IACf,MAAMD,WAAWO,MAAMR,IAAI,CAACC,QAAQ;IACpCO,MAAMR,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,wBAAwBE,IAAI,EAAES,WAAWT,IAAI,EAAEW,OAAOX,IAAI,EAAEQ,MAAMM,IAAI,IAAIL,UAAU,CAACD,MAAMM,IAAI,CAAC,EAAEN,MAAMO,QAAQ,IAAIN,UAAU,CAACD,MAAMO,QAAQ,CAAC,EAAEP,MAAMR,IAAI,CAACY,SAAS;IACxM,IAAIX,UAAU;QACZA,SAASW,SAAS,GAAGC,IAAAA,mBAAY,EAACf,wBAAwBG,QAAQ,EAAEA,SAASW,SAAS;IACxF,CAAC;IACD,OAAOJ;AACT,GACA,yDAAyD"}
|
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.4",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.5.
|
|
39
|
-
"@fluentui/react-jsx-runtime": "9.0.0-alpha.
|
|
38
|
+
"@fluentui/react-dialog": "^9.5.12",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "9.0.0-alpha.8",
|
|
40
40
|
"@fluentui/react-shared-contexts": "^9.5.1",
|
|
41
41
|
"@fluentui/react-theme": "^9.1.9",
|
|
42
|
-
"@fluentui/react-utilities": "^9.9.
|
|
42
|
+
"@fluentui/react-utilities": "^9.9.4",
|
|
43
43
|
"@griffel/react": "^1.5.7",
|
|
44
44
|
"@swc/helpers": "^0.4.14"
|
|
45
45
|
},
|