@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 CHANGED
@@ -2,7 +2,55 @@
2
2
  "name": "@fluentui/react-drawer",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 20 Jun 2023 12:34:51 GMT",
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, 20 Jun 2023 12:34:51 GMT and should not be manually modified.
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:34:51 GMT
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 DrawerBaseTypes = {
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> & DrawerBaseTypes & {
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> & DrawerBaseTypes & Pick<DrawerInlineProps, 'open' | 'separator'>;
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> & DrawerBaseTypes & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;
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> & DrawerBaseTypes & {
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>> & DrawerOverlayProps & DrawerInlineProps & {
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>> &\n DrawerOverlayProps &\n DrawerInlineProps & {\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,WA8BsD"}
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 { DrawerBaseTypes } 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 DrawerBaseTypes & {\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> &\n DrawerBaseTypes &\n Pick<DrawerInlineProps, 'open' | 'separator'>;\n"],"names":[],"mappings":"AAAA,WAyBgD"}
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 { DrawerBaseTypes } from '../../util/DrawerBase.types';\n\nexport type DrawerOverlaySlots = {\n root: Slot<DialogSurfaceProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n DrawerBaseTypes &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = ComponentState<DrawerOverlaySlots> &\n DrawerBaseTypes & {\n dialog: DialogProps;\n };\n"],"names":[],"mappings":"AAAA,WAqBI"}
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;QACR;QAEAa,MAAMd,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAW,QAAQ;YACNT;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}
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;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,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,GAAGV,mBAAmB,CAAC,CAAC;EACxC,MAAMW,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEO,KAAK,CAACI,IAAI,IAAIH,UAAU,CAACD,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACK,QAAQ,IAAIJ,UAAU,CAACD,KAAK,CAACK,QAAQ,CAAC,EAAEL,KAAK,CAACP,IAAI,CAACU,SAAS,CAAC;EACzM,OAAOH,KAAK;AAChB,CAAC"}
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 DrawerBaseTypes = {\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
+ {"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 { DrawerBaseTypes } from './DrawerBase.types';\n\nexport function getDefaultDrawerProps(props: DrawerBaseTypes) {\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"}
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;QACvB;QACAD,MAAME,IAAAA,qCAAqB,EAAC,OAAO;YAC/BZ;YACA,GAAGD,KAAK;QACZ;QACAc,QAAQ;YACJZ;YACAC;YACAM;YACAD;YACAD;QACJ;QACAH;QACAC;IACJ;AACJ"}
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":";;;;;;;;;;;IAEaA,uBAAuB,MAAvBA;IAkBAC,+BAA+B,MAA/BA;;uBApB0B;2CACH;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA8B;QAAqB;KAAuB;AAChF;AAIO,MAAMP,kCAAkCQ,CAAAA,QAAS;IACtD,MAAMC,aAAaC,IAAAA,8CAAmB;IACtC,MAAMC,SAAST;IACfM,MAAMP,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACd,wBAAwBE,IAAI,EAAEQ,WAAWR,IAAI,EAAEU,OAAOV,IAAI,EAAEO,MAAMM,IAAI,IAAIL,UAAU,CAACD,MAAMM,IAAI,CAAC,EAAEN,MAAMO,QAAQ,IAAIN,UAAU,CAACD,MAAMO,QAAQ,CAAC,EAAEP,MAAMP,IAAI,CAACW,SAAS;IACxM,OAAOJ;AACT,GACA,yDAAyD"}
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.2",
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.10",
39
- "@fluentui/react-jsx-runtime": "9.0.0-alpha.7",
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.3",
42
+ "@fluentui/react-utilities": "^9.9.4",
43
43
  "@griffel/react": "^1.5.7",
44
44
  "@swc/helpers": "^0.4.14"
45
45
  },