@fluentui/react-dialog 9.3.2 → 9.4.0
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 +54 -1
- package/CHANGELOG.md +20 -2
- package/dist/index.d.ts +6 -3
- package/lib/components/DialogActions/DialogActions.types.js.map +1 -1
- package/lib/components/DialogActions/useDialogActions.js +4 -2
- package/lib/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.js +7 -1
- package/lib/components/DialogActions/useDialogActionsStyles.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.js +1 -2
- package/lib/components/DialogBody/useDialogBodyStyles.js.map +1 -1
- package/lib-amd/components/DialogActions/DialogActions.types.js.map +1 -1
- package/lib-amd/components/DialogActions/useDialogActions.js +2 -1
- package/lib-amd/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib-amd/components/DialogActions/useDialogActionsStyles.js +7 -1
- package/lib-amd/components/DialogActions/useDialogActionsStyles.js.map +1 -1
- package/lib-amd/components/DialogBody/useDialogBodyStyles.js +1 -1
- package/lib-amd/components/DialogBody/useDialogBodyStyles.js.map +1 -1
- package/lib-commonjs/components/DialogActions/DialogActions.types.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActions.js +4 -2
- package/lib-commonjs/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.js +7 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js +1 -2
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,60 @@
|
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 16 Mar 2023 14:33:30 GMT",
|
|
6
|
+
"tag": "@fluentui/react-dialog_v9.4.0",
|
|
7
|
+
"version": "9.4.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-dialog",
|
|
13
|
+
"commit": "a3ad6f25502d8ec77c9376eaa09ed7d1238f6c73",
|
|
14
|
+
"comment": "fix(DialogBody): Remove `maxWidth` style"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"minor": [
|
|
18
|
+
{
|
|
19
|
+
"author": "lingfangao@hotmail.com",
|
|
20
|
+
"package": "@fluentui/react-dialog",
|
|
21
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81",
|
|
22
|
+
"comment": "feat(DialogActions): Implment `fluid` prop"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-dialog",
|
|
27
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.1",
|
|
28
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-dialog",
|
|
33
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.14",
|
|
34
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-dialog",
|
|
39
|
+
"comment": "Bump @fluentui/react-aria to v9.3.14",
|
|
40
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-dialog",
|
|
45
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.0",
|
|
46
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-dialog",
|
|
51
|
+
"comment": "Bump @fluentui/react-portal to v9.2.1",
|
|
52
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Wed, 15 Mar 2023 10:19:53 GMT",
|
|
6
59
|
"tag": "@fluentui/react-dialog_v9.3.2",
|
|
7
60
|
"version": "9.3.2",
|
|
8
61
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 16 Mar 2023 14:33:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.4.0)
|
|
8
|
+
|
|
9
|
+
Thu, 16 Mar 2023 14:33:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.3.2..@fluentui/react-dialog_v9.4.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat(DialogActions): Implment `fluid` prop ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by lingfangao@hotmail.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.14 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
17
|
+
- Bump @fluentui/react-aria to v9.3.14 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.6.0 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v9.2.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix(DialogBody): Remove `maxWidth` style ([PR #27230](https://github.com/microsoft/fluentui/pull/27230) by lingfangao@hotmail.com)
|
|
24
|
+
|
|
7
25
|
## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.3.2)
|
|
8
26
|
|
|
9
|
-
Wed, 15 Mar 2023 10:
|
|
27
|
+
Wed, 15 Mar 2023 10:19:53 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.3.1..@fluentui/react-dialog_v9.3.2)
|
|
11
29
|
|
|
12
30
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -40,6 +40,11 @@ export declare type DialogActionsProps = ComponentProps<DialogActionsSlots> & {
|
|
|
40
40
|
* @default 'end'
|
|
41
41
|
*/
|
|
42
42
|
position?: DialogActionsPosition;
|
|
43
|
+
/**
|
|
44
|
+
* Makes the actions expand the entire width of the DialogBody
|
|
45
|
+
* @default false
|
|
46
|
+
*/
|
|
47
|
+
fluid?: boolean;
|
|
43
48
|
};
|
|
44
49
|
|
|
45
50
|
export declare type DialogActionsSlots = {
|
|
@@ -49,9 +54,7 @@ export declare type DialogActionsSlots = {
|
|
|
49
54
|
/**
|
|
50
55
|
* State used in rendering DialogActions
|
|
51
56
|
*/
|
|
52
|
-
export declare type DialogActionsState = ComponentState<DialogActionsSlots> &
|
|
53
|
-
position: DialogActionsPosition;
|
|
54
|
-
};
|
|
57
|
+
export declare type DialogActionsState = ComponentState<DialogActionsSlots> & Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;
|
|
55
58
|
|
|
56
59
|
/**
|
|
57
60
|
* The `DialogBody` is a container where the content of the dialog is rendered.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogActions.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots>
|
|
1
|
+
{"version":3,"file":"DialogActions.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n\n /**\n * Makes the actions expand the entire width of the DialogBody\n * @default false\n */\n fluid?: boolean;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots> &\n Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;\n"]}
|
|
@@ -10,7 +10,8 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
|
10
10
|
*/
|
|
11
11
|
export const useDialogActions_unstable = (props, ref) => {
|
|
12
12
|
const {
|
|
13
|
-
position = 'end'
|
|
13
|
+
position = 'end',
|
|
14
|
+
fluid = false
|
|
14
15
|
} = props;
|
|
15
16
|
return {
|
|
16
17
|
components: {
|
|
@@ -20,7 +21,8 @@ export const useDialogActions_unstable = (props, ref) => {
|
|
|
20
21
|
ref,
|
|
21
22
|
...props
|
|
22
23
|
}),
|
|
23
|
-
position
|
|
24
|
+
position,
|
|
25
|
+
fluid
|
|
24
26
|
};
|
|
25
27
|
};
|
|
26
28
|
//# sourceMappingURL=useDialogActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getNativeElementProps","useDialogActions_unstable","props","ref","position","components","root"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end' } = props;\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n position,\n };\n};\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,yBAAyB,GAAGA,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEC,QAAQ,GAAG;EAAK,CAAE,
|
|
1
|
+
{"version":3,"names":["getNativeElementProps","useDialogActions_unstable","props","ref","position","fluid","components","root"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end', fluid = false } = props;\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n position,\n fluid,\n };\n};\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,yBAAyB,GAAGA,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC,KAAK,GAAG;EAAK,CAAE,GAAGH,KAAK;EACjD,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEP,qBAAqB,CAAC,KAAK,EAAE;MACjCG,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,QAAQ;IACRC;GACD;AACH,CAAC"}
|
|
@@ -26,6 +26,12 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
26
26
|
Br312pm: "f14781pt",
|
|
27
27
|
nk6f5a: "f13d374e",
|
|
28
28
|
Bw0ie65: "f1fjo411"
|
|
29
|
+
},
|
|
30
|
+
fluidStart: {
|
|
31
|
+
Bw0ie65: "fiappcv"
|
|
32
|
+
},
|
|
33
|
+
fluidEnd: {
|
|
34
|
+
Br312pm: "f14781pt"
|
|
29
35
|
}
|
|
30
36
|
}, {
|
|
31
37
|
d: [".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1a7i8kp{justify-self:end;}", ".f11u0jfc{grid-row-start:actions-end;}", ".f1d6tb1o{grid-column-start:actions-end;}", ".f23awfp{grid-row-end:actions-end;}", ".fiappcv{grid-column-end:actions-end;}", ".fsxvdwy{justify-self:start;}", ".f1vnb230{grid-row-start:actions-start;}", ".f14781pt{grid-column-start:actions-start;}", ".f13d374e{grid-row-end:actions-start;}", ".f1fjo411{grid-column-end:actions-start;}"],
|
|
@@ -40,7 +46,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
40
46
|
*/
|
|
41
47
|
export const useDialogActionsStyles_unstable = state => {
|
|
42
48
|
const styles = useStyles();
|
|
43
|
-
state.root.className = mergeClasses(dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.root.className);
|
|
49
|
+
state.root.className = mergeClasses(dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
|
|
44
50
|
return state;
|
|
45
51
|
};
|
|
46
52
|
//# sourceMappingURL=useDialogActionsStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","DIALOG_GAP","ACTIONS_END_GRID_AREA","ACTIONS_START_GRID_AREA","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useStyles","Bqenvij","B7ck84d","mc9l5x","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Ijaq50","Br312pm","nk6f5a","Bw0ie65","gridPositionStart","d","m","useDialogActionsStyles_unstable","state","styles","className","position"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n root: {\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n },\n gridPositionEnd: {\n justifySelf: 'end',\n ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n },\n gridPositionStart: {\n justifySelf: 'start',\n ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n styles.root,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.root.className,\n );\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SACEC,UAAU,EACVC,qBAAqB,EACrBC,uBAAuB,EACvBC,+BAA+B,QAC1B,0BAA0B;AAEjC,OAAO,MAAMC,uBAAuB,GAAuC;EACzEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGT,QAAA;EAAAQ,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAL,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","DIALOG_GAP","ACTIONS_END_GRID_AREA","ACTIONS_START_GRID_AREA","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useStyles","Bqenvij","B7ck84d","mc9l5x","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Ijaq50","Br312pm","nk6f5a","Bw0ie65","gridPositionStart","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","styles","className","position","fluid"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n root: {\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n },\n gridPositionEnd: {\n justifySelf: 'end',\n ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n },\n gridPositionStart: {\n justifySelf: 'start',\n ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n },\n fluidStart: {\n gridColumnEnd: ACTIONS_END_GRID_AREA,\n },\n fluidEnd: {\n gridColumnStart: ACTIONS_START_GRID_AREA,\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n styles.root,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SACEC,UAAU,EACVC,qBAAqB,EACrBC,uBAAuB,EACvBC,+BAA+B,QAC1B,0BAA0B;AAEjC,OAAO,MAAMC,uBAAuB,GAAuC;EACzEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGT,QAAA;EAAAQ,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAL,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,UAAA;IAAAF,OAAA;EAAA;EAAAG,QAAA;IAAAL,OAAA;EAAA;AAAA;EAAAM,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAyBhB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,GAAGrB,SAAS,EAAE;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAG9B,YAAY,CACjCM,uBAAuB,CAACC,IAAI,EAC5BsB,MAAM,CAACtB,IAAI,EACXqB,KAAK,CAACG,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,iBAAiB,EACtDM,KAAK,CAACG,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACb,eAAe,EAClDY,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACG,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACN,UAAU,EAC9DK,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACG,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACL,QAAQ,EAC1DI,KAAK,CAACrB,IAAI,CAACuB,SAAS,CACrB;EACD,OAAOF,KAAK;AACd,CAAC"}
|
|
@@ -12,7 +12,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
12
12
|
fshzfu: "f120kxnn",
|
|
13
13
|
a9b677: "fly5x3f",
|
|
14
14
|
Bqenvij: "f3052tw",
|
|
15
|
-
B2u0y6b: "fvgz9i8",
|
|
16
15
|
Bxyxcbc: "flnwrvu",
|
|
17
16
|
B7ck84d: "f1ewtqcl",
|
|
18
17
|
wkccdc: "f874eam",
|
|
@@ -27,7 +26,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
27
26
|
B06wobe: "f1dangjo"
|
|
28
27
|
}
|
|
29
28
|
}, {
|
|
30
|
-
d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".
|
|
29
|
+
d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".fe34spp{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"],
|
|
31
30
|
m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
|
|
32
31
|
m: "screen and (max-width: 480px)"
|
|
33
32
|
}], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","ACTIONS_END_GRID_AREA","ACTIONS_START_GRID_AREA","CONTENT_GRID_AREA","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","TITLE_ACTION_GRID_AREA","TITLE_GRID_AREA","dialogBodyClassNames","root","useStyles","mc9l5x","fshzfu","a9b677","Bqenvij","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","ACTIONS_END_GRID_AREA","ACTIONS_START_GRID_AREA","CONTENT_GRID_AREA","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","TITLE_ACTION_GRID_AREA","TITLE_GRID_AREA","dialogBodyClassNames","root","useStyles","mc9l5x","fshzfu","a9b677","Bqenvij","Bxyxcbc","B7ck84d","wkccdc","Budl1dq","zoa1oz","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","B5xtmjs","Bqu9lor","B06wobe","d","m","useDialogBodyStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n CONTENT_GRID_AREA,\n DIALOG_GAP,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n SURFACE_PADDING,\n TITLE_ACTION_GRID_AREA,\n TITLE_GRID_AREA,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'grid',\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n },\n width: `100%`,\n height: 'fit-content',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr auto',\n gridTemplateColumns: '1fr 1fr auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n },\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SACEC,qBAAqB,EACrBC,uBAAuB,EACvBC,iBAAiB,EACjBC,UAAU,EACVC,+BAA+B,EAC/BC,eAAe,EACfC,sBAAsB,EACtBC,eAAe,QACV,gBAAgB;AAEvB,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGb,QAAA;EAAAY,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA8BhB;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGrB,SAAS,EAAE;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGlC,YAAY,CAACU,oBAAoB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAEjG,OAAOF,KAAK;AACd,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogActions.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots>
|
|
1
|
+
{"version":3,"file":"DialogActions.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n\n /**\n * Makes the actions expand the entire width of the DialogBody\n * @default false\n */\n fluid?: boolean;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots> &\n Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;\n"]}
|
|
@@ -12,13 +12,14 @@ define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (r
|
|
|
12
12
|
* @param ref - reference to root HTMLElement of DialogActions
|
|
13
13
|
*/
|
|
14
14
|
var useDialogActions_unstable = function (props, ref) {
|
|
15
|
-
var _a = props.position, position = _a === void 0 ? 'end' : _a;
|
|
15
|
+
var _a = props.position, position = _a === void 0 ? 'end' : _a, _b = props.fluid, fluid = _b === void 0 ? false : _b;
|
|
16
16
|
return {
|
|
17
17
|
components: {
|
|
18
18
|
root: 'div',
|
|
19
19
|
},
|
|
20
20
|
root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref }, props)),
|
|
21
21
|
position: position,
|
|
22
|
+
fluid: fluid,
|
|
22
23
|
};
|
|
23
24
|
};
|
|
24
25
|
exports.useDialogActions_unstable = useDialogActions_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDialogActions.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,yBAAyB,GAAG,UACvC,KAAyB,EACzB,GAA2B;QAEnB,IAAA,
|
|
1
|
+
{"version":3,"file":"useDialogActions.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,yBAAyB,GAAG,UACvC,KAAyB,EACzB,GAA2B;QAEnB,IAAA,KAAoC,KAAK,SAAzB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,KAAkB,KAAK,MAAV,EAAb,KAAK,mBAAG,KAAK,KAAA,CAAW;QAClD,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,KAAA,IACA,KAAK,EACR;YACF,QAAQ,UAAA;YACR,KAAK,OAAA;SACN,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,yBAAyB,6BAgBpC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end', fluid = false } = props;\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n position,\n fluid,\n };\n};\n"]}
|
|
@@ -13,13 +13,19 @@ define(["require", "exports", "tslib", "@griffel/react", "../../contexts/constan
|
|
|
13
13
|
}, _a)),
|
|
14
14
|
gridPositionEnd: tslib_1.__assign({ justifySelf: 'end' }, react_1.shorthands.gridArea(constants_1.ACTIONS_END_GRID_AREA)),
|
|
15
15
|
gridPositionStart: tslib_1.__assign({ justifySelf: 'start' }, react_1.shorthands.gridArea(constants_1.ACTIONS_START_GRID_AREA)),
|
|
16
|
+
fluidStart: {
|
|
17
|
+
gridColumnEnd: constants_1.ACTIONS_END_GRID_AREA,
|
|
18
|
+
},
|
|
19
|
+
fluidEnd: {
|
|
20
|
+
gridColumnStart: constants_1.ACTIONS_START_GRID_AREA,
|
|
21
|
+
},
|
|
16
22
|
});
|
|
17
23
|
/**
|
|
18
24
|
* Apply styling to the DialogActions slots based on the state
|
|
19
25
|
*/
|
|
20
26
|
var useDialogActionsStyles_unstable = function (state) {
|
|
21
27
|
var styles = useStyles();
|
|
22
|
-
state.root.className = react_1.mergeClasses(exports.dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.root.className);
|
|
28
|
+
state.root.className = react_1.mergeClasses(exports.dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
|
|
23
29
|
return state;
|
|
24
30
|
};
|
|
25
31
|
exports.useDialogActionsStyles_unstable = useDialogActionsStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDialogActionsStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":";;;;;IAUa,QAAA,uBAAuB,GAAuC;QACzE,IAAI,EAAE,mBAAmB;KAC1B,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,sCACF,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,IACZ,kBAAU,CAAC,GAAG,CAAC,sBAAU,CAAC,gBAC5B,2CAA+B,IAAG;YACjC,aAAa,EAAE,QAAQ;YACvB,WAAW,EAAE,SAAS;SACvB,MACF;QACD,eAAe,qBACb,WAAW,EAAE,KAAK,IACf,kBAAU,CAAC,QAAQ,CAAC,iCAAqB,CAAC,CAC9C;QACD,iBAAiB,qBACf,WAAW,EAAE,OAAO,IACjB,kBAAU,CAAC,QAAQ,CAAC,mCAAuB,CAAC,CAChD;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,+BAA+B,GAAG,UAAC,KAAyB;QACvE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,+BAAuB,CAAC,IAAI,EAC5B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,iBAAiB,EACtD,KAAK,CAAC,QAAQ,KAAK,KAAK,IAAI,MAAM,CAAC,eAAe,EAClD,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"useDialogActionsStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":";;;;;IAUa,QAAA,uBAAuB,GAAuC;QACzE,IAAI,EAAE,mBAAmB;KAC1B,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,sCACF,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,IACZ,kBAAU,CAAC,GAAG,CAAC,sBAAU,CAAC,gBAC5B,2CAA+B,IAAG;YACjC,aAAa,EAAE,QAAQ;YACvB,WAAW,EAAE,SAAS;SACvB,MACF;QACD,eAAe,qBACb,WAAW,EAAE,KAAK,IACf,kBAAU,CAAC,QAAQ,CAAC,iCAAqB,CAAC,CAC9C;QACD,iBAAiB,qBACf,WAAW,EAAE,OAAO,IACjB,kBAAU,CAAC,QAAQ,CAAC,mCAAuB,CAAC,CAChD;QACD,UAAU,EAAE;YACV,aAAa,EAAE,iCAAqB;SACrC;QACD,QAAQ,EAAE;YACR,eAAe,EAAE,mCAAuB;SACzC;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,+BAA+B,GAAG,UAAC,KAAyB;QACvE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,+BAAuB,CAAC,IAAI,EAC5B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,iBAAiB,EACtD,KAAK,CAAC,QAAQ,KAAK,KAAK,IAAI,MAAM,CAAC,eAAe,EAClD,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,UAAU,EAC9D,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,IAAI,MAAM,CAAC,QAAQ,EAC1D,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAZW,QAAA,+BAA+B,mCAY1C","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n root: {\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n },\n gridPositionEnd: {\n justifySelf: 'end',\n ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n },\n gridPositionStart: {\n justifySelf: 'start',\n ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n },\n fluidStart: {\n gridColumnEnd: ACTIONS_END_GRID_AREA,\n },\n fluidEnd: {\n gridColumnStart: ACTIONS_START_GRID_AREA,\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n styles.root,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"]}
|
|
@@ -12,7 +12,7 @@ define(["require", "exports", "tslib", "@griffel/react", "../../contexts"], func
|
|
|
12
12
|
var useStyles = react_1.makeStyles({
|
|
13
13
|
root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'grid', '&::backdrop': {
|
|
14
14
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
15
|
-
}, width: "100%", height: 'fit-content',
|
|
15
|
+
}, width: "100%", height: 'fit-content', maxHeight: "calc(100vh - 2 * " + contexts_1.SURFACE_PADDING + ")", boxSizing: 'border-box', gridTemplateRows: 'auto 1fr auto', gridTemplateColumns: '1fr 1fr auto', gridTemplateAreas: "\n \"" + contexts_1.TITLE_GRID_AREA + " " + contexts_1.TITLE_GRID_AREA + " " + contexts_1.TITLE_ACTION_GRID_AREA + "\"\n \"" + contexts_1.CONTENT_GRID_AREA + " " + contexts_1.CONTENT_GRID_AREA + " " + contexts_1.CONTENT_GRID_AREA + "\"\n \"" + contexts_1.ACTIONS_START_GRID_AREA + " " + contexts_1.ACTIONS_END_GRID_AREA + " " + contexts_1.ACTIONS_END_GRID_AREA + "\"\n " }, react_1.shorthands.overflow('unset')), react_1.shorthands.gap(contexts_1.DIALOG_GAP)), (_a = {}, _a[contexts_1.MEDIA_QUERY_BREAKPOINT_SELECTOR] = {
|
|
16
16
|
maxWidth: '100vw',
|
|
17
17
|
gridTemplateRows: 'auto 1fr auto auto',
|
|
18
18
|
gridTemplateAreas: "\n \"" + contexts_1.TITLE_GRID_AREA + " " + contexts_1.TITLE_GRID_AREA + " " + contexts_1.TITLE_ACTION_GRID_AREA + "\"\n \"" + contexts_1.CONTENT_GRID_AREA + " " + contexts_1.CONTENT_GRID_AREA + " " + contexts_1.CONTENT_GRID_AREA + "\"\n \"" + contexts_1.ACTIONS_START_GRID_AREA + " " + contexts_1.ACTIONS_START_GRID_AREA + " " + contexts_1.ACTIONS_START_GRID_AREA + "\"\n \"" + contexts_1.ACTIONS_END_GRID_AREA + " " + contexts_1.ACTIONS_END_GRID_AREA + " " + contexts_1.ACTIONS_END_GRID_AREA + "\"\n ",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDialogBodyStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":";;;;;IAca,QAAA,oBAAoB,GAAoC;QACnE,IAAI,EAAE,gBAAgB;KACvB,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,uDACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE;gBACb,eAAe,EAAE,oBAAoB;aACtC,EACD,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,aAAa,EACrB,
|
|
1
|
+
{"version":3,"file":"useDialogBodyStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":";;;;;IAca,QAAA,oBAAoB,GAAoC;QACnE,IAAI,EAAE,gBAAgB;KACvB,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,uDACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE;gBACb,eAAe,EAAE,oBAAoB;aACtC,EACD,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,sBAAoB,0BAAe,MAAG,EACjD,SAAS,EAAE,YAAY,EACvB,gBAAgB,EAAE,eAAe,EACjC,mBAAmB,EAAE,cAAc,EACnC,iBAAiB,EAAE,aAChB,0BAAe,SAAI,0BAAe,SAAI,iCAAsB,kBAC5D,4BAAiB,SAAI,4BAAiB,SAAI,4BAAiB,kBAC3D,kCAAuB,SAAI,gCAAqB,SAAI,gCAAqB,aAC3E,IACE,kBAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,GAC5B,kBAAU,CAAC,GAAG,CAAC,qBAAU,CAAC,gBAC5B,0CAA+B,IAAG;YACjC,QAAQ,EAAE,OAAO;YACjB,gBAAgB,EAAE,oBAAoB;YACtC,iBAAiB,EAAE,iBACd,0BAAe,SAAI,0BAAe,SAAI,iCAAsB,sBAC5D,4BAAiB,SAAI,4BAAiB,SAAI,4BAAiB,sBAC3D,kCAAuB,SAAI,kCAAuB,SAAI,kCAAuB,sBAC7E,gCAAqB,SAAI,gCAAqB,SAAI,gCAAqB,eAC3E;SACF,MACF;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,4BAA4B,GAAG,UAAC,KAAsB;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAElG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IALW,QAAA,4BAA4B,gCAKvC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n CONTENT_GRID_AREA,\n DIALOG_GAP,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n SURFACE_PADDING,\n TITLE_ACTION_GRID_AREA,\n TITLE_GRID_AREA,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'grid',\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n },\n width: `100%`,\n height: 'fit-content',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr auto',\n gridTemplateColumns: '1fr 1fr auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n },\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots>
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n /**\n * defines the position on the dialog grid of the actions\n * @default 'end'\n */\n position?: DialogActionsPosition;\n\n /**\n * Makes the actions expand the entire width of the DialogBody\n * @default false\n */\n fluid?: boolean;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots> &\n Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;\n"],"mappings":""}
|
|
@@ -16,7 +16,8 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
16
16
|
*/
|
|
17
17
|
const useDialogActions_unstable = (props, ref) => {
|
|
18
18
|
const {
|
|
19
|
-
position = 'end'
|
|
19
|
+
position = 'end',
|
|
20
|
+
fluid = false
|
|
20
21
|
} = props;
|
|
21
22
|
return {
|
|
22
23
|
components: {
|
|
@@ -26,7 +27,8 @@ const useDialogActions_unstable = (props, ref) => {
|
|
|
26
27
|
ref,
|
|
27
28
|
...props
|
|
28
29
|
}),
|
|
29
|
-
position
|
|
30
|
+
position,
|
|
31
|
+
fluid
|
|
30
32
|
};
|
|
31
33
|
};
|
|
32
34
|
exports.useDialogActions_unstable = useDialogActions_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_utilities_1","require","useDialogActions_unstable","props","ref","position","components","root","getNativeElementProps","exports"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end' } = props;\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n position,\n };\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAGA;;;;;;;;;AASO,MAAMC,yBAAyB,GAAGA,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEC,QAAQ,GAAG;EAAK,CAAE,
|
|
1
|
+
{"version":3,"names":["react_utilities_1","require","useDialogActions_unstable","props","ref","position","fluid","components","root","getNativeElementProps","exports"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n props: DialogActionsProps,\n ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n const { position = 'end', fluid = false } = props;\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n position,\n fluid,\n };\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAGA;;;;;;;;;AASO,MAAMC,yBAAyB,GAAGA,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC,KAAK,GAAG;EAAK,CAAE,GAAGH,KAAK;EACjD,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAER,iBAAA,CAAAS,qBAAqB,CAAC,KAAK,EAAE;MACjCL,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,QAAQ;IACRC;GACD;AACH,CAAC;AAhBYI,OAAA,CAAAR,yBAAyB,GAAAA,yBAAA"}
|
|
@@ -32,6 +32,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
32
32
|
Br312pm: "f14781pt",
|
|
33
33
|
nk6f5a: "f13d374e",
|
|
34
34
|
Bw0ie65: "f1fjo411"
|
|
35
|
+
},
|
|
36
|
+
fluidStart: {
|
|
37
|
+
Bw0ie65: "fiappcv"
|
|
38
|
+
},
|
|
39
|
+
fluidEnd: {
|
|
40
|
+
Br312pm: "f14781pt"
|
|
35
41
|
}
|
|
36
42
|
}, {
|
|
37
43
|
d: [".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1a7i8kp{justify-self:end;}", ".f11u0jfc{grid-row-start:actions-end;}", ".f1d6tb1o{grid-column-start:actions-end;}", ".f23awfp{grid-row-end:actions-end;}", ".fiappcv{grid-column-end:actions-end;}", ".fsxvdwy{justify-self:start;}", ".f1vnb230{grid-row-start:actions-start;}", ".f14781pt{grid-column-start:actions-start;}", ".f13d374e{grid-row-end:actions-start;}", ".f1fjo411{grid-column-end:actions-start;}"],
|
|
@@ -46,7 +52,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
46
52
|
*/
|
|
47
53
|
const useDialogActionsStyles_unstable = state => {
|
|
48
54
|
const styles = useStyles();
|
|
49
|
-
state.root.className = react_1.mergeClasses(exports.dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.root.className);
|
|
55
|
+
state.root.className = react_1.mergeClasses(exports.dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
|
|
50
56
|
return state;
|
|
51
57
|
};
|
|
52
58
|
exports.useDialogActionsStyles_unstable = useDialogActionsStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_1","require","constants_1","exports","dialogActionsClassNames","root","useStyles","__styles","Bqenvij","B7ck84d","mc9l5x","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Ijaq50","Br312pm","nk6f5a","Bw0ie65","gridPositionStart","d","m","useDialogActionsStyles_unstable","state","styles","className","mergeClasses","position"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n root: {\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n },\n gridPositionEnd: {\n justifySelf: 'end',\n ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n },\n gridPositionStart: {\n justifySelf: 'start',\n ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n styles.root,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.root.className,\n );\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AAGA,MAAAC,WAAA,gBAAAD,OAAA;AAOaE,OAAA,CAAAC,uBAAuB,GAAuC;EACzEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGN,OAAA,CAAAO,QAAU;EAAAF,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAL,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;
|
|
1
|
+
{"version":3,"names":["react_1","require","constants_1","exports","dialogActionsClassNames","root","useStyles","__styles","Bqenvij","B7ck84d","mc9l5x","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Ijaq50","Br312pm","nk6f5a","Bw0ie65","gridPositionStart","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","styles","className","mergeClasses","position","fluid"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n root: {\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n },\n gridPositionEnd: {\n justifySelf: 'end',\n ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n },\n gridPositionStart: {\n justifySelf: 'start',\n ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n },\n fluidStart: {\n gridColumnEnd: ACTIONS_END_GRID_AREA,\n },\n fluidEnd: {\n gridColumnStart: ACTIONS_START_GRID_AREA,\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n styles.root,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AAGA,MAAAC,WAAA,gBAAAD,OAAA;AAOaE,OAAA,CAAAC,uBAAuB,GAAuC;EACzEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGN,OAAA,CAAAO,QAAU;EAAAF,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAL,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,UAAA;IAAAF,OAAA;EAAA;EAAAG,QAAA;IAAAL,OAAA;EAAA;AAAA;EAAAM,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAyB1B;AAEF;;;AAGO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,GAAGtB,SAAS,EAAE;EAC1BqB,KAAK,CAACtB,IAAI,CAACwB,SAAS,GAAG7B,OAAA,CAAA8B,YAAY,CACjC3B,OAAA,CAAAC,uBAAuB,CAACC,IAAI,EAC5BuB,MAAM,CAACvB,IAAI,EACXsB,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIH,MAAM,CAACP,iBAAiB,EACtDM,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIH,MAAM,CAACb,eAAe,EAClDY,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIH,MAAM,CAACN,UAAU,EAC9DK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIH,MAAM,CAACL,QAAQ,EAC1DI,KAAK,CAACtB,IAAI,CAACwB,SAAS,CACrB;EACD,OAAOF,KAAK;AACd,CAAC;AAZYxB,OAAA,CAAAuB,+BAA+B,GAAAA,+BAAA"}
|
|
@@ -18,7 +18,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
18
18
|
fshzfu: "f120kxnn",
|
|
19
19
|
a9b677: "fly5x3f",
|
|
20
20
|
Bqenvij: "f3052tw",
|
|
21
|
-
B2u0y6b: "fvgz9i8",
|
|
22
21
|
Bxyxcbc: "flnwrvu",
|
|
23
22
|
B7ck84d: "f1ewtqcl",
|
|
24
23
|
wkccdc: "f874eam",
|
|
@@ -33,7 +32,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
33
32
|
B06wobe: "f1dangjo"
|
|
34
33
|
}
|
|
35
34
|
}, {
|
|
36
|
-
d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".
|
|
35
|
+
d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".fe34spp{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"],
|
|
37
36
|
m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
|
|
38
37
|
m: "screen and (max-width: 480px)"
|
|
39
38
|
}], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_1","require","contexts_1","exports","dialogBodyClassNames","root","useStyles","__styles","mc9l5x","fshzfu","a9b677","Bqenvij","
|
|
1
|
+
{"version":3,"names":["react_1","require","contexts_1","exports","dialogBodyClassNames","root","useStyles","__styles","mc9l5x","fshzfu","a9b677","Bqenvij","Bxyxcbc","B7ck84d","wkccdc","Budl1dq","zoa1oz","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","B5xtmjs","Bqu9lor","B06wobe","d","m","useDialogBodyStyles_unstable","state","styles","className","mergeClasses"],"sources":["../src/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n CONTENT_GRID_AREA,\n DIALOG_GAP,\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n SURFACE_PADDING,\n TITLE_ACTION_GRID_AREA,\n TITLE_GRID_AREA,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'grid',\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n },\n width: `100%`,\n height: 'fit-content',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr auto',\n gridTemplateColumns: '1fr 1fr auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n },\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AAGA,MAAAC,UAAA,gBAAAD,OAAA;AAWaE,OAAA,CAAAC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGN,OAAA,CAAAO,QAAU;EAAAF,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA8B1B;AAEF;;;AAGO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGtB,SAAS,EAAE;EAC1BqB,KAAK,CAACtB,IAAI,CAACwB,SAAS,GAAG7B,OAAA,CAAA8B,YAAY,CAAC3B,OAAA,CAAAC,oBAAoB,CAACC,IAAI,EAAEuB,MAAM,CAACvB,IAAI,EAAEsB,KAAK,CAACtB,IAAI,CAACwB,SAAS,CAAC;EAEjG,OAAOF,KAAK;AACd,CAAC;AALYxB,OAAA,CAAAuB,4BAA4B,GAAAA,4BAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.0",
|
|
4
4
|
"description": "Dialog component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@griffel/react": "^1.5.2",
|
|
39
|
-
"@fluentui/react-utilities": "^9.7.
|
|
39
|
+
"@fluentui/react-utilities": "^9.7.1",
|
|
40
40
|
"@fluentui/keyboard-keys": "^9.0.1",
|
|
41
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
41
|
+
"@fluentui/react-context-selector": "^9.1.14",
|
|
42
42
|
"@fluentui/react-shared-contexts": "^9.3.1",
|
|
43
|
-
"@fluentui/react-aria": "^9.3.
|
|
43
|
+
"@fluentui/react-aria": "^9.3.14",
|
|
44
44
|
"@fluentui/react-icons": "^2.0.175",
|
|
45
|
-
"@fluentui/react-tabster": "^9.
|
|
45
|
+
"@fluentui/react-tabster": "^9.6.0",
|
|
46
46
|
"@fluentui/react-theme": "^9.1.6",
|
|
47
|
-
"@fluentui/react-portal": "^9.2.
|
|
47
|
+
"@fluentui/react-portal": "^9.2.1",
|
|
48
48
|
"tslib": "^2.1.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|