@fluentui/react-dialog 9.10.4 → 9.10.6
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.md +28 -2
- package/lib/components/Dialog/useDialog.js +2 -20
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +22 -1
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.js +16 -10
- package/lib/utils/useDisableBodyScroll.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.styles.js +1 -0
- package/lib/utils/useDisableBodyScroll.styles.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialog.js +0 -18
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +21 -0
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +2 -2
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/utils/useDisableBodyScroll.js +13 -8
- package/lib-commonjs/utils/useDisableBodyScroll.js.map +1 -1
- package/lib-commonjs/utils/useDisableBodyScroll.styles.js +14 -3
- package/lib-commonjs/utils/useDisableBodyScroll.styles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 20 May 2024 12:36:31 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.6)
|
|
8
|
+
|
|
9
|
+
Mon, 20 May 2024 12:36:31 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.5..@fluentui/react-dialog_v9.10.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.60 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
19
|
+
- Bump @fluentui/react-aria to v9.11.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
21
|
+
- Bump @fluentui/react-portal to v9.4.25 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.10.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.5)
|
|
24
|
+
|
|
25
|
+
Thu, 16 May 2024 09:25:14 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.4..@fluentui/react-dialog_v9.10.5)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
|
|
31
|
+
- bugfix: fix scroll locking issues introduced by a regression ([PR #31377](https://github.com/microsoft/fluentui/pull/31377) by bernardo.sunderhus@gmail.com)
|
|
32
|
+
|
|
7
33
|
## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.4)
|
|
8
34
|
|
|
9
|
-
Thu, 09 May 2024 19:
|
|
35
|
+
Thu, 09 May 2024 19:35:11 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.3..@fluentui/react-dialog_v9.10.4)
|
|
11
37
|
|
|
12
38
|
### Patches
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useControllableState, useEventCallback, useId
|
|
2
|
+
import { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';
|
|
3
3
|
import { useHasParentContext } from '@fluentui/react-context-selector';
|
|
4
|
-
import {
|
|
4
|
+
import { useFocusFirstElement } from '../../utils';
|
|
5
5
|
import { DialogContext } from '../../contexts';
|
|
6
6
|
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
7
7
|
/**
|
|
@@ -33,24 +33,6 @@ import { useModalAttributes } from '@fluentui/react-tabster';
|
|
|
33
33
|
legacyTrapFocus: !inertTrapFocus
|
|
34
34
|
});
|
|
35
35
|
const isNestedDialog = useHasParentContext(DialogContext);
|
|
36
|
-
const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
|
|
37
|
-
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
38
|
-
useIsomorphicLayoutEffect(()=>{
|
|
39
|
-
if (isNestedDialog) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
if (open && isBodyScrollLocked) {
|
|
43
|
-
disableBodyScroll();
|
|
44
|
-
} else {
|
|
45
|
-
enableBodyScroll();
|
|
46
|
-
}
|
|
47
|
-
}, [
|
|
48
|
-
disableBodyScroll,
|
|
49
|
-
enableBodyScroll,
|
|
50
|
-
isBodyScrollLocked,
|
|
51
|
-
isNestedDialog,
|
|
52
|
-
open
|
|
53
|
-
]);
|
|
54
36
|
return {
|
|
55
37
|
components: {
|
|
56
38
|
backdrop: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId
|
|
1
|
+
{"version":3,"sources":["useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus,\n });\n\n const isNestedDialog = useHasParentContext(DialogContext);\n\n return {\n components: {\n backdrop: 'div',\n },\n inertTrapFocus,\n open,\n modalType,\n content,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog,\n dialogRef: focusRef,\n modalAttributes,\n triggerAttributes,\n };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-dialog [useDialog]:\n Dialog must contain at least one child <DialogSurface/>,\n and at most two children <DialogTrigger/> <DialogSurface/> (in this order).\n `);\n }\n }\n switch (childrenArray.length) {\n // case where there's a trigger followed by content\n case 2:\n return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n // case where there's only content\n case 1:\n return [undefined, childrenArray[0]];\n // unknown case\n default:\n return [undefined, undefined];\n }\n}\n"],"names":["React","useControllableState","useEventCallback","useId","useHasParentContext","useFocusFirstElement","DialogContext","useModalAttributes","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","backdrop","dialogTitleId","dialogRef","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAC1F,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGjB,qBAAqB;QAC3CkB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBrB,iBAAiB,CAACsB;QAC1CZ,yBAAAA,mCAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,WAAWtB,qBAAqBY,MAAMN;IAE5C,MAAM,EAAEiB,eAAe,EAAEC,iBAAiB,EAAE,GAAGtB,mBAAmB;QAChEuB,WAAWnB,cAAc;QACzBoB,iBAAiB,CAAClB;IACpB;IAEA,MAAMmB,iBAAiB5B,oBAAoBE;IAE3C,OAAO;QACL2B,YAAY;YACVC,UAAU;QACZ;QACArB;QACAI;QACAN;QACAI;QACAD;QACAS;QACAY,eAAehC,MAAM;QACrB6B;QACAI,WAAWT;QACXC;QACAC;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASb,4BACPN,QAAyB;IAEzB,MAAM2B,gBAAgBrC,MAAMsC,QAAQ,CAACC,OAAO,CAAC7B;IAC7C,IAAI8B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/**\n * Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, 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);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,+BAA+B,QAAQ,0BAA0B;AACtF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAH,OAAA;IAAAC,MAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC5U,OAAOH,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/**\n * Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, 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);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,+BAA+B,QAAQ,0BAA0B;AACtF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAH,OAAA;IAAAC,MAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC5U,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,eAAe,QAAQ,gBAAgB;AACvH,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAe1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGb,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,eAAe,QAAQ,gBAAgB;AACvH,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAe1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGb,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/**\n * Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,wBAAwB,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAcrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1BI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/**\n * Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,wBAAwB,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAcrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1BI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';
|
|
2
|
+
import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
3
|
import { useDialogContext_unstable } from '../../contexts';
|
|
4
4
|
import { Escape } from '@fluentui/keyboard-keys';
|
|
5
5
|
import { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';
|
|
6
|
+
import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
|
|
6
7
|
/**
|
|
7
8
|
* Create the state required to render DialogSurface.
|
|
8
9
|
*
|
|
@@ -19,6 +20,7 @@ import { useDialogTransitionContext_unstable } from '../../contexts/dialogTransi
|
|
|
19
20
|
const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
|
|
20
21
|
const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
|
|
21
22
|
const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
|
|
23
|
+
const open = useDialogContext_unstable((ctx)=>ctx.open);
|
|
22
24
|
const handledBackdropClick = useEventCallback((event)=>{
|
|
23
25
|
if (isResolvedShorthand(props.backdrop)) {
|
|
24
26
|
var _props_backdrop_onClick, _props_backdrop;
|
|
@@ -56,6 +58,25 @@ import { useDialogTransitionContext_unstable } from '../../contexts/dialogTransi
|
|
|
56
58
|
if (backdrop) {
|
|
57
59
|
backdrop.onClick = handledBackdropClick;
|
|
58
60
|
}
|
|
61
|
+
const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
|
|
62
|
+
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
63
|
+
useIsomorphicLayoutEffect(()=>{
|
|
64
|
+
if (isNestedDialog) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (open && isBodyScrollLocked && transitionStatus === 'entering') {
|
|
68
|
+
disableBodyScroll();
|
|
69
|
+
} else if (transitionStatus === 'exited') {
|
|
70
|
+
enableBodyScroll();
|
|
71
|
+
}
|
|
72
|
+
}, [
|
|
73
|
+
disableBodyScroll,
|
|
74
|
+
enableBodyScroll,
|
|
75
|
+
isBodyScrollLocked,
|
|
76
|
+
isNestedDialog,
|
|
77
|
+
open,
|
|
78
|
+
transitionStatus
|
|
79
|
+
]);
|
|
59
80
|
return {
|
|
60
81
|
components: {
|
|
61
82
|
backdrop: 'div',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n const transitionStatus = useDialogTransitionContext_unstable();\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n return {\n components: { backdrop: 'div', root: 'div' },\n backdrop,\n isNestedDialog,\n transitionStatus,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useDialogContext_unstable","Escape","useDialogTransitionContext_unstable","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","transitionStatus","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","
|
|
1
|
+
{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n const transitionStatus = useDialogTransitionContext_unstable();\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n const open = useDialogContext_unstable(ctx => ctx.open);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n useIsomorphicLayoutEffect(() => {\n if (isNestedDialog) {\n return;\n }\n if (open && isBodyScrollLocked && transitionStatus === 'entering') {\n disableBodyScroll();\n } else if (transitionStatus === 'exited') {\n enableBodyScroll();\n }\n }, [disableBodyScroll, enableBodyScroll, isBodyScrollLocked, isNestedDialog, open, transitionStatus]);\n\n return {\n components: { backdrop: 'div', root: 'div' },\n backdrop,\n isNestedDialog,\n transitionStatus,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","useDialogContext_unstable","Escape","useDialogTransitionContext_unstable","useDisableBodyScroll","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","transitionStatus","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","isBodyScrollLocked","Boolean","components","root","mountNode","always","tabIndex","role","undefined"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ export const dialogSurfaceClassNames = {
|
|
|
10
10
|
* Styles for the root slot
|
|
11
11
|
*/
|
|
12
12
|
const useRootBaseStyle = /*#__PURE__*/__resetStyles("rhzkxut", "r1dhpx9", {
|
|
13
|
-
r: [".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset
|
|
13
|
+
r: [".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".rhzkxut:focus{outline-style:none;}", ".rhzkxut:focus-visible{outline-style:none;}", ".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rhzkxut[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1dhpx9:focus{outline-style:none;}", ".r1dhpx9:focus-visible{outline-style:none;}", ".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1dhpx9[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
14
14
|
s: ["@media (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}", "@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}", "@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
|
|
15
15
|
});
|
|
16
16
|
const rootVisible = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","rootVisible","boxShadow","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","static"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflits with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = makeStyles({\n animated: {\n // initial style before animation:\n opacity: 0,\n boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n transform: 'scale(0.85) translateZ(0)'\n },\n static: {\n boxShadow: tokens.shadow64\n },\n unmounted: {},\n entering: {\n ...rootWhenAnimating,\n ...rootVisible\n },\n entered: rootVisible,\n idle: rootVisible,\n exiting: {\n ...rootWhenAnimating,\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Styles for the backdrop slot\n */ const backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n position: 'fixed',\n // initial style before animation:\n transitionDuration: tokens.durationGentle,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'opacity',\n willChange: 'opacity',\n opacity: 0\n});\nconst useBackdropStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n unmounted: {},\n entering: backdropVisible,\n entered: backdropVisible,\n idle: backdropVisible,\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const { isNestedDialog, root, backdrop, transitionStatus } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","rootVisible","boxShadow","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","static"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflits with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = makeStyles({\n animated: {\n // initial style before animation:\n opacity: 0,\n boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n transform: 'scale(0.85) translateZ(0)'\n },\n static: {\n boxShadow: tokens.shadow64\n },\n unmounted: {},\n entering: {\n ...rootWhenAnimating,\n ...rootVisible\n },\n entered: rootVisible,\n idle: rootVisible,\n exiting: {\n ...rootWhenAnimating,\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Styles for the backdrop slot\n */ const backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n position: 'fixed',\n // initial style before animation:\n transitionDuration: tokens.durationGentle,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'opacity',\n willChange: 'opacity',\n opacity: 0\n});\nconst useBackdropStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n unmounted: {},\n entering: backdropVisible,\n entered: backdropVisible,\n idle: backdropVisible,\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const { isNestedDialog, root, backdrop, transitionStatus } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kCAAkC,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACrK,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CA+B5B,CAAC;AACF,MAAMC,WAAW,GAAG;EAChBC,SAAS,EAAEd,MAAM,CAACe,QAAQ;EAC1BC,SAAS,EAAE,wBAAwB;EACnCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,GAAG;EACtBC,kBAAkB,EAAEnB,MAAM,CAACoB,cAAc;EACzCC,kBAAkB,EAAE,gCAAgC;EACpD;EACAC,wBAAwB,EAAEtB,MAAM,CAACuB;AACrC,CAAC;AACD,MAAMC,aAAa,gBAAG1B,QAAA;EAAA2B,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;EAAA;EAAAE,SAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAN,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAQ,OAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAS,IAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAU,OAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,eAAe,GAAG;EACxBtB,OAAO,EAAE;AACb,CAAC;AACD,MAAMuB,oBAAoB,gBAAG3C,aAAA,iPAU5B,CAAC;AACF,MAAM4C,iBAAiB,gBAAG3C,QAAA;EAAA4C,oBAAA;IAAAC,MAAA;EAAA;EAAAd,SAAA;EAAAC,QAAA;IAAAJ,MAAA;EAAA;EAAAQ,OAAA;IAAAR,MAAA;EAAA;EAAAS,IAAA;IAAAT,MAAA;EAAA;EAAAU,OAAA;IAAAH,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAYzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAEtC,IAAI;IAAEC,QAAQ;IAAEsC;EAAiB,CAAC,GAAGF,KAAK;EAClE,MAAMG,aAAa,GAAGtC,gBAAgB,CAAC,CAAC;EACxC,MAAMuC,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1CjC,IAAI,CAAC4C,SAAS,GAAGrD,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEwC,aAAa,EAAED,gBAAgB,GAAGE,UAAU,CAACxB,QAAQ,GAAGwB,UAAU,CAACI,MAAM,EAAEN,gBAAgB,IAAIE,UAAU,CAACF,gBAAgB,CAAC,EAAEvC,IAAI,CAAC4C,SAAS,CAAC;EACxM,IAAI3C,QAAQ,EAAE;IACVA,QAAQ,CAAC2C,SAAS,GAAGrD,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEyC,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAEK,gBAAgB,IAAII,cAAc,CAACJ,gBAAgB,CAAC,EAAEtC,QAAQ,CAAC2C,SAAS,CAAC;EAC3N;EACA,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/**\n * Styles for the action slot\n */ const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */ export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGR,aAAA,6PAO9B,CAAC;AACF,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,gBAAGd,aAAA;EAAAe,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;IACdW,KAAK,CAACX,MAAM,CAACe,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/**\n * Styles for the action slot\n */ const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */ export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGR,aAAA,6PAO9B,CAAC;AACF,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,gBAAGd,aAAA;EAAAe,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;IACdW,KAAK,CAACX,MAAM,CAACe,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,35 +1,41 @@
|
|
|
1
1
|
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
|
|
3
|
+
import { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* @internal
|
|
6
|
+
* A React *hook* that disables body scrolling through `overflowY: hidden` CSS property
|
|
6
7
|
*/ export function useDisableBodyScroll() {
|
|
7
|
-
const
|
|
8
|
+
const htmlNoScrollStyles = useHTMLNoScrollStyles();
|
|
9
|
+
const bodyNoScrollStyles = useBodyNoScrollStyles();
|
|
8
10
|
const { targetDocument } = useFluent_unstable();
|
|
9
11
|
const disableBodyScroll = useCallback(()=>{
|
|
10
12
|
var _targetDocument_defaultView;
|
|
11
13
|
if (!targetDocument) {
|
|
12
14
|
return;
|
|
13
15
|
}
|
|
14
|
-
var
|
|
15
|
-
const
|
|
16
|
-
if (!
|
|
16
|
+
var _targetDocument_defaultView_innerHeight;
|
|
17
|
+
const isHorizontalScrollbarVisible = targetDocument.body.clientHeight > ((_targetDocument_defaultView_innerHeight = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight) !== null && _targetDocument_defaultView_innerHeight !== void 0 ? _targetDocument_defaultView_innerHeight : 0);
|
|
18
|
+
if (!isHorizontalScrollbarVisible) {
|
|
17
19
|
return;
|
|
18
20
|
}
|
|
19
|
-
targetDocument.documentElement.classList.add(
|
|
21
|
+
targetDocument.documentElement.classList.add(htmlNoScrollStyles);
|
|
22
|
+
targetDocument.body.classList.add(bodyNoScrollStyles);
|
|
20
23
|
return;
|
|
21
24
|
}, [
|
|
22
25
|
targetDocument,
|
|
23
|
-
|
|
26
|
+
htmlNoScrollStyles,
|
|
27
|
+
bodyNoScrollStyles
|
|
24
28
|
]);
|
|
25
29
|
const enableBodyScroll = useCallback(()=>{
|
|
26
30
|
if (!targetDocument) {
|
|
27
31
|
return;
|
|
28
32
|
}
|
|
29
|
-
targetDocument.documentElement.classList.remove(
|
|
33
|
+
targetDocument.documentElement.classList.remove(htmlNoScrollStyles);
|
|
34
|
+
targetDocument.body.classList.remove(bodyNoScrollStyles);
|
|
30
35
|
}, [
|
|
31
36
|
targetDocument,
|
|
32
|
-
|
|
37
|
+
htmlNoScrollStyles,
|
|
38
|
+
bodyNoScrollStyles
|
|
33
39
|
]);
|
|
34
40
|
return {
|
|
35
41
|
disableBodyScroll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nimport { useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * hook that disables body scrolling through `overflowY: hidden` CSS property\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const
|
|
1
|
+
{"version":3,"sources":["useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * @internal\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const htmlNoScrollStyles = useHTMLNoScrollStyles();\n const bodyNoScrollStyles = useBodyNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n\n const disableBodyScroll = useCallback(() => {\n if (!targetDocument) {\n return;\n }\n const isHorizontalScrollbarVisible =\n targetDocument.body.clientHeight > (targetDocument.defaultView?.innerHeight ?? 0);\n if (!isHorizontalScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n targetDocument.body.classList.add(bodyNoScrollStyles);\n return;\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n const enableBodyScroll = useCallback(() => {\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n targetDocument.body.classList.remove(bodyNoScrollStyles);\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n return {\n disableBodyScroll,\n enableBodyScroll,\n };\n}\n"],"names":["useFluent_unstable","useCallback","useBodyNoScrollStyles","useHTMLNoScrollStyles","useDisableBodyScroll","htmlNoScrollStyles","bodyNoScrollStyles","targetDocument","disableBodyScroll","isHorizontalScrollbarVisible","body","clientHeight","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,WAAW,QAAQ,QAAQ;AAEpC,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,gCAAgC;AAE7F;;;CAGC,GACD,OAAO,SAASC;IAId,MAAMC,qBAAqBF;IAC3B,MAAMG,qBAAqBJ;IAC3B,MAAM,EAAEK,cAAc,EAAE,GAAGP;IAE3B,MAAMQ,oBAAoBP,YAAY;YAKEM;QAJtC,IAAI,CAACA,gBAAgB;YACnB;QACF;YAEsCA;QADtC,MAAME,+BACJF,eAAeG,IAAI,CAACC,YAAY,GAAIJ,CAAAA,CAAAA,2CAAAA,8BAAAA,eAAeK,WAAW,cAA1BL,kDAAAA,4BAA4BM,WAAW,cAAvCN,qDAAAA,0CAA2C,CAAA;QACjF,IAAI,CAACE,8BAA8B;YACjC;QACF;QACAF,eAAeO,eAAe,CAACC,SAAS,CAACC,GAAG,CAACX;QAC7CE,eAAeG,IAAI,CAACK,SAAS,CAACC,GAAG,CAACV;QAClC;IACF,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,MAAMW,mBAAmBhB,YAAY;QACnC,IAAI,CAACM,gBAAgB;YACnB;QACF;QACAA,eAAeO,eAAe,CAACC,SAAS,CAACG,MAAM,CAACb;QAChDE,eAAeG,IAAI,CAACK,SAAS,CAACG,MAAM,CAACZ;IACvC,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,OAAO;QACLE;QACAS;IACF;AACF"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __resetStyles } from '@griffel/react';
|
|
2
2
|
// this style must be applied to the html element to disable scrolling
|
|
3
3
|
export const useHTMLNoScrollStyles = /*#__PURE__*/__resetStyles("r6pzz3z", null, [".r6pzz3z{overflow-y:hidden;overflow-y:clip;scrollbar-gutter:stable;}"]);
|
|
4
|
+
export const useBodyNoScrollStyles = /*#__PURE__*/__resetStyles("r144vlu9", null, [".r144vlu9{overflow-y:hidden;}"]);
|
|
4
5
|
//# sourceMappingURL=useDisableBodyScroll.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","useHTMLNoScrollStyles"],"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n overflowY: [\n 'hidden',\n 'clip'\n ],\n scrollbarGutter: 'stable'\n});\n"],"mappings":"AAAA,SAAAA,aAAA,QAAgC,gBAAgB;AAChD;AACA,OAAO,MAAMC,qBAAqB,gBAAGD,aAAA,0FAMpC,CAAC"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","useHTMLNoScrollStyles","useBodyNoScrollStyles"],"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n overflowY: [\n 'hidden',\n 'clip'\n ],\n scrollbarGutter: 'stable'\n});\nexport const useBodyNoScrollStyles = makeResetStyles({\n overflowY: 'hidden'\n});\n"],"mappings":"AAAA,SAAAA,aAAA,QAAgC,gBAAgB;AAChD;AACA,OAAO,MAAMC,qBAAqB,gBAAGD,aAAA,0FAMpC,CAAC;AACF,OAAO,MAAME,qBAAqB,gBAAGF,aAAA,oDAEpC,CAAC","ignoreList":[]}
|
|
@@ -37,24 +37,6 @@ const useDialog_unstable = (props)=>{
|
|
|
37
37
|
legacyTrapFocus: !inertTrapFocus
|
|
38
38
|
});
|
|
39
39
|
const isNestedDialog = (0, _reactcontextselector.useHasParentContext)(_contexts.DialogContext);
|
|
40
|
-
const { disableBodyScroll, enableBodyScroll } = (0, _utils.useDisableBodyScroll)();
|
|
41
|
-
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
42
|
-
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
43
|
-
if (isNestedDialog) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
if (open && isBodyScrollLocked) {
|
|
47
|
-
disableBodyScroll();
|
|
48
|
-
} else {
|
|
49
|
-
enableBodyScroll();
|
|
50
|
-
}
|
|
51
|
-
}, [
|
|
52
|
-
disableBodyScroll,
|
|
53
|
-
enableBodyScroll,
|
|
54
|
-
isBodyScrollLocked,
|
|
55
|
-
isNestedDialog,
|
|
56
|
-
open
|
|
57
|
-
]);
|
|
58
40
|
return {
|
|
59
41
|
components: {
|
|
60
42
|
backdrop: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId
|
|
1
|
+
{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */ export const useDialog_unstable = (props)=>{\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n const [trigger, content] = childrenToTriggerAndContent(children);\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const requestOpenChange = useEventCallback((data)=>{\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n const focusRef = useFocusFirstElement(open, modalType);\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus\n });\n const isNestedDialog = useHasParentContext(DialogContext);\n return {\n components: {\n backdrop: 'div'\n },\n inertTrapFocus,\n open,\n modalType,\n content,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog,\n dialogRef: focusRef,\n modalAttributes,\n triggerAttributes\n };\n};\n/**\n * Extracts trigger and content from children\n */ function childrenToTriggerAndContent(children) {\n const childrenArray = React.Children.toArray(children);\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-dialog [useDialog]:\nDialog must contain at least one child <DialogSurface/>,\nand at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);\n }\n }\n switch(childrenArray.length){\n // case where there's a trigger followed by content\n case 2:\n return childrenArray;\n // case where there's only content\n case 1:\n return [\n undefined,\n childrenArray[0]\n ];\n // unknown case\n default:\n return [\n undefined,\n undefined\n ];\n }\n}\n"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","isNestedDialog","useHasParentContext","DialogContext","components","backdrop","dialogTitleId","useId","dialogRef","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACuC;sCAC1B;uBACC;0BACP;8BACK;AAQxB,MAAMA,qBAAqB,CAACC;IACnC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAChF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QACzCC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc;IAClB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAAC,CAACC;QACxCd,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED;QACrF,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YAClCV,QAAQQ,KAAKT,IAAI;QACrB;IACJ;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAM,EAAEoB,eAAe,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,gCAAkB,EAAC;QAC9DC,WAAWvB,cAAc;QACzBwB,iBAAiB,CAACtB;IACtB;IACA,MAAMuB,iBAAiBC,IAAAA,yCAAmB,EAACC,uBAAa;IACxD,OAAO;QACHC,YAAY;YACRC,UAAU;QACd;QACA3B;QACAI;QACAN;QACAI;QACAD;QACAU;QACAiB,eAAeC,IAAAA,qBAAK,EAAC;QACrBN;QACAO,WAAWd;QACXE;QACAC;IACJ;AACJ;AACA;;CAEC,GAAG,SAAShB,4BAA4BN,QAAQ;IAC7C,MAAMkC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAACrC;IAC7C,IAAIsC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC1D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;2EAEiD,CAAC;QACpE;IACJ;IACA,OAAOT,cAAcO,MAAM;QACvB,mDAAmD;QACnD,KAAK;YACD,OAAOP;QACX,kCAAkC;QAClC,KAAK;YACD,OAAO;gBACHU;gBACAV,aAAa,CAAC,EAAE;aACnB;QACL,eAAe;QACf;YACI,OAAO;gBACHU;gBACAA;aACH;IACT;AACJ"}
|
|
@@ -14,6 +14,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
14
14
|
const _contexts = require("../../contexts");
|
|
15
15
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
16
16
|
const _dialogTransitionContext = require("../../contexts/dialogTransitionContext");
|
|
17
|
+
const _useDisableBodyScroll = require("../../utils/useDisableBodyScroll");
|
|
17
18
|
const useDialogSurface_unstable = (props, ref)=>{
|
|
18
19
|
const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
|
|
19
20
|
const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
|
|
@@ -22,6 +23,7 @@ const useDialogSurface_unstable = (props, ref)=>{
|
|
|
22
23
|
const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
|
|
23
24
|
const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
|
|
24
25
|
const dialogTitleID = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
|
|
26
|
+
const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
|
|
25
27
|
const handledBackdropClick = (0, _reactutilities.useEventCallback)((event)=>{
|
|
26
28
|
if ((0, _reactutilities.isResolvedShorthand)(props.backdrop)) {
|
|
27
29
|
var _props_backdrop_onClick, _props_backdrop;
|
|
@@ -59,6 +61,25 @@ const useDialogSurface_unstable = (props, ref)=>{
|
|
|
59
61
|
if (backdrop) {
|
|
60
62
|
backdrop.onClick = handledBackdropClick;
|
|
61
63
|
}
|
|
64
|
+
const { disableBodyScroll, enableBodyScroll } = (0, _useDisableBodyScroll.useDisableBodyScroll)();
|
|
65
|
+
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
66
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
67
|
+
if (isNestedDialog) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
if (open && isBodyScrollLocked && transitionStatus === 'entering') {
|
|
71
|
+
disableBodyScroll();
|
|
72
|
+
} else if (transitionStatus === 'exited') {
|
|
73
|
+
enableBodyScroll();
|
|
74
|
+
}
|
|
75
|
+
}, [
|
|
76
|
+
disableBodyScroll,
|
|
77
|
+
enableBodyScroll,
|
|
78
|
+
isBodyScrollLocked,
|
|
79
|
+
isNestedDialog,
|
|
80
|
+
open,
|
|
81
|
+
transitionStatus
|
|
82
|
+
]);
|
|
62
83
|
return {
|
|
63
84
|
components: {
|
|
64
85
|
backdrop: 'div',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */ export const useDialogSurface_unstable = (props, ref)=>{\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);\n const transitionStatus = useDialogTransitionContext_unstable();\n const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n const handledBackdropClick = useEventCallback((event)=>{\n if (isResolvedShorthand(props.backdrop)) {\n var _props_backdrop_onClick, _props_backdrop;\n (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick'\n });\n }\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _props_onKeyDown;\n (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown'\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n });\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true'\n },\n elementType: 'div'\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n return {\n components: {\n backdrop: 'div',\n root: 'div'\n },\n backdrop,\n isNestedDialog,\n transitionStatus,\n mountNode: props.mountNode,\n root: slot.always(getIntrinsicElementProps('div', {\n tabIndex: -1,\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, dialogRef)\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","isNestedDialog","transitionStatus","useDialogTransitionContext_unstable","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","
|
|
1
|
+
{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */ export const useDialogSurface_unstable = (props, ref)=>{\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);\n const transitionStatus = useDialogTransitionContext_unstable();\n const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n const open = useDialogContext_unstable((ctx)=>ctx.open);\n const handledBackdropClick = useEventCallback((event)=>{\n if (isResolvedShorthand(props.backdrop)) {\n var _props_backdrop_onClick, _props_backdrop;\n (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick'\n });\n }\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _props_onKeyDown;\n (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown'\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n });\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true'\n },\n elementType: 'div'\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n useIsomorphicLayoutEffect(()=>{\n if (isNestedDialog) {\n return;\n }\n if (open && isBodyScrollLocked && transitionStatus === 'entering') {\n disableBodyScroll();\n } else if (transitionStatus === 'exited') {\n enableBodyScroll();\n }\n }, [\n disableBodyScroll,\n enableBodyScroll,\n isBodyScrollLocked,\n isNestedDialog,\n open,\n transitionStatus\n ]);\n return {\n components: {\n backdrop: 'div',\n root: 'div'\n },\n backdrop,\n isNestedDialog,\n transitionStatus,\n mountNode: props.mountNode,\n root: slot.always(getIntrinsicElementProps('div', {\n tabIndex: -1,\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, dialogRef)\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","isNestedDialog","transitionStatus","useDialogTransitionContext_unstable","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","key","Escape","preventDefault","slot","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","components","root","mountNode","always","getIntrinsicElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":"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"}
|
|
@@ -26,12 +26,12 @@ const dialogSurfaceClassNames = {
|
|
|
26
26
|
* Styles for the root slot
|
|
27
27
|
*/ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rhzkxut", "r1dhpx9", {
|
|
28
28
|
r: [
|
|
29
|
-
".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset
|
|
29
|
+
".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
|
|
30
30
|
".rhzkxut:focus{outline-style:none;}",
|
|
31
31
|
".rhzkxut:focus-visible{outline-style:none;}",
|
|
32
32
|
".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
33
33
|
".rhzkxut[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
34
|
-
".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset
|
|
34
|
+
".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
|
|
35
35
|
".r1dhpx9:focus{outline-style:none;}",
|
|
36
36
|
".r1dhpx9:focus-visible{outline-style:none;}",
|
|
37
37
|
".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = /*#__PURE__*/__resetStyles(\"rhzkxut\", \"r1dhpx9\", {\n r: [\".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".rhzkxut:focus{outline-style:none;}\", \".rhzkxut:focus-visible{outline-style:none;}\", \".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rhzkxut[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1dhpx9:focus{outline-style:none;}\", \".r1dhpx9:focus-visible{outline-style:none;}\", \".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1dhpx9[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}\", \"@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}\", \"@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\", \"@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}\", \"@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}\"]\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = /*#__PURE__*/__styles({\n animated: {\n abs64n: \"fk73vx1\",\n E5pizo: \"f1yzz98r\",\n Bz10aip: \"f15ofi6c\"\n },\n \"static\": {\n E5pizo: \"f10nrhrw\"\n },\n unmounted: {},\n entering: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f18ad807\",\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}\", \".f15ofi6c{transform:scale(0.85) translateZ(0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\", \".fc397y7{transition-duration:var(--durationGentle);}\", \".f1b86uth{transition-property:opacity,transform,box-shadow;}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = /*#__PURE__*/__resetStyles(\"r19ug08i\", null, [\".r19ug08i{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n },\n unmounted: {},\n entering: {\n abs64n: \"f5p0z4x\"\n },\n entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const {\n isNestedDialog,\n root,\n backdrop,\n transitionStatus\n } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","rootVisible","boxShadow","tokens","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","__styles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses","static"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA0FAC,+BAA+B;eAA/BA;;;uBA9FyC;4BAC/B;AAGhB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,WAAW;IACxEC,GAAG;QAAC;QAA6c;QAAuC;QAA+C;QAAgK;QAAkvB;QAA6c;QAAuC;QAA+C;QAAgK;KAAivB;IAC72FC,GAAG;QAAC;QAA+L;QAAoE;QAAwK;QAA+L;QAAoE;KAAqK;AACz1B;AACA,MAAMC,cAAc;IAClBC,WAAWC,kBAAM,CAACC,QAAQ;IAC1BC,WAAW;IACXC,SAAS;AACX;AACA,MAAMC,oBAAoB;IACxBC,oBAAoBL,kBAAM,CAACM,cAAc;IACzCC,oBAAoB;IACpB,+DAA+D;IAC/DC,0BAA0BR,kBAAM,CAACS,kBAAkB;AACrD;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACA,UAAU;QACRD,QAAQ;IACV;IACAE,WAAW,CAAC;IACZC,UAAU;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTN,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAQ,SAAS;QACPP,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAS,MAAM;QACJR,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAU,SAAS;QACPL,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAwB;QAA6D;QAAmD;QAA0C;QAAwD;QAAgE;QAAoE;QAAgD;QAAwB;KAAmE;AAC/f;AACA;;CAEC,GACD,MAAMC,kBAAkB;IACtBvB,SAAS;AACX;AACA,MAAMwB,uBAAuB,WAAW,GAAEhC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA6N;AACxS,MAAMiC,oBAAoB,WAAW,GAAEjB,IAAAA,eAAQ,EAAC;IAC9CkB,sBAAsB;QACpBC,QAAQ;IACV;IACAd,WAAW,CAAC;IACZC,UAAU;QACRJ,QAAQ;IACV;IACAQ,SAAS;QACPR,QAAQ;IACV;IACAS,MAAM;QACJT,QAAQ;IACV;IACAU,SAAS;QACPH,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMlC,kCAAkCwC,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACdxC,IAAI,EACJC,QAAQ,EACRwC,gBAAgB,EACjB,GAAGF;IACJ,MAAMG,gBAAgBxC;IACtB,MAAMyC,aAAazB;IACnB,MAAM0B,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBpC,KAAK8C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBE,IAAI,EAAE0C,eAAeD,mBAAmBE,WAAWvB,QAAQ,GAAGuB,WAAWK,MAAM,EAAEP,oBAAoBE,UAAU,CAACF,iBAAiB,EAAEzC,KAAK8C,SAAS;IACvM,IAAI7C,UAAU;QACZA,SAAS6C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBG,QAAQ,EAAE2C,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEI,oBAAoBI,cAAc,CAACJ,iBAAiB,EAAExC,SAAS6C,SAAS;IACxN;IACA,OAAOP;AACT,GACA,yDAAyD"}
|
|
1
|
+
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = /*#__PURE__*/__resetStyles(\"rhzkxut\", \"r1dhpx9\", {\n r: [\".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".rhzkxut:focus{outline-style:none;}\", \".rhzkxut:focus-visible{outline-style:none;}\", \".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rhzkxut[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1dhpx9:focus{outline-style:none;}\", \".r1dhpx9:focus-visible{outline-style:none;}\", \".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1dhpx9[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}\", \"@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}\", \"@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\", \"@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}\", \"@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}\"]\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = /*#__PURE__*/__styles({\n animated: {\n abs64n: \"fk73vx1\",\n E5pizo: \"f1yzz98r\",\n Bz10aip: \"f15ofi6c\"\n },\n \"static\": {\n E5pizo: \"f10nrhrw\"\n },\n unmounted: {},\n entering: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f18ad807\",\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}\", \".f15ofi6c{transform:scale(0.85) translateZ(0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\", \".fc397y7{transition-duration:var(--durationGentle);}\", \".f1b86uth{transition-property:opacity,transform,box-shadow;}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = /*#__PURE__*/__resetStyles(\"r19ug08i\", null, [\".r19ug08i{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n },\n unmounted: {},\n entering: {\n abs64n: \"f5p0z4x\"\n },\n entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const {\n isNestedDialog,\n root,\n backdrop,\n transitionStatus\n } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","rootVisible","boxShadow","tokens","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","__styles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses","static"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA0FAC,+BAA+B;eAA/BA;;;uBA9FyC;4BAC/B;AAGhB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,WAAW;IACxEC,GAAG;QAAC;QAAub;QAAuC;QAA+C;QAAgK;QAAkvB;QAAub;QAAuC;QAA+C;QAAgK;KAAivB;IACj0FC,GAAG;QAAC;QAA+L;QAAoE;QAAwK;QAA+L;QAAoE;KAAqK;AACz1B;AACA,MAAMC,cAAc;IAClBC,WAAWC,kBAAM,CAACC,QAAQ;IAC1BC,WAAW;IACXC,SAAS;AACX;AACA,MAAMC,oBAAoB;IACxBC,oBAAoBL,kBAAM,CAACM,cAAc;IACzCC,oBAAoB;IACpB,+DAA+D;IAC/DC,0BAA0BR,kBAAM,CAACS,kBAAkB;AACrD;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACA,UAAU;QACRD,QAAQ;IACV;IACAE,WAAW,CAAC;IACZC,UAAU;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTN,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAQ,SAAS;QACPP,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAS,MAAM;QACJR,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAU,SAAS;QACPL,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAwB;QAA6D;QAAmD;QAA0C;QAAwD;QAAgE;QAAoE;QAAgD;QAAwB;KAAmE;AAC/f;AACA;;CAEC,GACD,MAAMC,kBAAkB;IACtBvB,SAAS;AACX;AACA,MAAMwB,uBAAuB,WAAW,GAAEhC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA6N;AACxS,MAAMiC,oBAAoB,WAAW,GAAEjB,IAAAA,eAAQ,EAAC;IAC9CkB,sBAAsB;QACpBC,QAAQ;IACV;IACAd,WAAW,CAAC;IACZC,UAAU;QACRJ,QAAQ;IACV;IACAQ,SAAS;QACPR,QAAQ;IACV;IACAS,MAAM;QACJT,QAAQ;IACV;IACAU,SAAS;QACPH,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMlC,kCAAkCwC,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACdxC,IAAI,EACJC,QAAQ,EACRwC,gBAAgB,EACjB,GAAGF;IACJ,MAAMG,gBAAgBxC;IACtB,MAAMyC,aAAazB;IACnB,MAAM0B,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBpC,KAAK8C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBE,IAAI,EAAE0C,eAAeD,mBAAmBE,WAAWvB,QAAQ,GAAGuB,WAAWK,MAAM,EAAEP,oBAAoBE,UAAU,CAACF,iBAAiB,EAAEzC,KAAK8C,SAAS;IACvM,IAAI7C,UAAU;QACZA,SAAS6C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBG,QAAQ,EAAE2C,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEI,oBAAoBI,cAAc,CAACJ,iBAAiB,EAAExC,SAAS6C,SAAS;IACxN;IACA,OAAOP;AACT,GACA,yDAAyD"}
|
|
@@ -12,32 +12,37 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
|
12
12
|
const _react = require("react");
|
|
13
13
|
const _useDisableBodyScrollstyles = require("./useDisableBodyScroll.styles");
|
|
14
14
|
function useDisableBodyScroll() {
|
|
15
|
-
const
|
|
15
|
+
const htmlNoScrollStyles = (0, _useDisableBodyScrollstyles.useHTMLNoScrollStyles)();
|
|
16
|
+
const bodyNoScrollStyles = (0, _useDisableBodyScrollstyles.useBodyNoScrollStyles)();
|
|
16
17
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
17
18
|
const disableBodyScroll = (0, _react.useCallback)(()=>{
|
|
18
19
|
var _targetDocument_defaultView;
|
|
19
20
|
if (!targetDocument) {
|
|
20
21
|
return;
|
|
21
22
|
}
|
|
22
|
-
var
|
|
23
|
-
const
|
|
24
|
-
if (!
|
|
23
|
+
var _targetDocument_defaultView_innerHeight;
|
|
24
|
+
const isHorizontalScrollbarVisible = targetDocument.body.clientHeight > ((_targetDocument_defaultView_innerHeight = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight) !== null && _targetDocument_defaultView_innerHeight !== void 0 ? _targetDocument_defaultView_innerHeight : 0);
|
|
25
|
+
if (!isHorizontalScrollbarVisible) {
|
|
25
26
|
return;
|
|
26
27
|
}
|
|
27
|
-
targetDocument.documentElement.classList.add(
|
|
28
|
+
targetDocument.documentElement.classList.add(htmlNoScrollStyles);
|
|
29
|
+
targetDocument.body.classList.add(bodyNoScrollStyles);
|
|
28
30
|
return;
|
|
29
31
|
}, [
|
|
30
32
|
targetDocument,
|
|
31
|
-
|
|
33
|
+
htmlNoScrollStyles,
|
|
34
|
+
bodyNoScrollStyles
|
|
32
35
|
]);
|
|
33
36
|
const enableBodyScroll = (0, _react.useCallback)(()=>{
|
|
34
37
|
if (!targetDocument) {
|
|
35
38
|
return;
|
|
36
39
|
}
|
|
37
|
-
targetDocument.documentElement.classList.remove(
|
|
40
|
+
targetDocument.documentElement.classList.remove(htmlNoScrollStyles);
|
|
41
|
+
targetDocument.body.classList.remove(bodyNoScrollStyles);
|
|
38
42
|
}, [
|
|
39
43
|
targetDocument,
|
|
40
|
-
|
|
44
|
+
htmlNoScrollStyles,
|
|
45
|
+
bodyNoScrollStyles
|
|
41
46
|
]);
|
|
42
47
|
return {
|
|
43
48
|
disableBodyScroll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDisableBodyScroll.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\nimport { useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n/**\n * hook that disables body scrolling through `overflowY: hidden` CSS property\n */ export function useDisableBodyScroll() {\n const
|
|
1
|
+
{"version":3,"sources":["useDisableBodyScroll.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n/**\n * @internal\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n */ export function useDisableBodyScroll() {\n const htmlNoScrollStyles = useHTMLNoScrollStyles();\n const bodyNoScrollStyles = useBodyNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n const disableBodyScroll = useCallback(()=>{\n var _targetDocument_defaultView;\n if (!targetDocument) {\n return;\n }\n var _targetDocument_defaultView_innerHeight;\n const isHorizontalScrollbarVisible = targetDocument.body.clientHeight > ((_targetDocument_defaultView_innerHeight = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight) !== null && _targetDocument_defaultView_innerHeight !== void 0 ? _targetDocument_defaultView_innerHeight : 0);\n if (!isHorizontalScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n targetDocument.body.classList.add(bodyNoScrollStyles);\n return;\n }, [\n targetDocument,\n htmlNoScrollStyles,\n bodyNoScrollStyles\n ]);\n const enableBodyScroll = useCallback(()=>{\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n targetDocument.body.classList.remove(bodyNoScrollStyles);\n }, [\n targetDocument,\n htmlNoScrollStyles,\n bodyNoScrollStyles\n ]);\n return {\n disableBodyScroll,\n enableBodyScroll\n };\n}\n"],"names":["useDisableBodyScroll","htmlNoScrollStyles","useHTMLNoScrollStyles","bodyNoScrollStyles","useBodyNoScrollStyles","targetDocument","useFluent_unstable","disableBodyScroll","useCallback","_targetDocument_defaultView","_targetDocument_defaultView_innerHeight","isHorizontalScrollbarVisible","body","clientHeight","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":";;;;+BAMoBA;;;eAAAA;;;qCANe;uBACP;4CACiC;AAIlD,SAASA;IAChB,MAAMC,qBAAqBC,IAAAA,iDAAqB;IAChD,MAAMC,qBAAqBC,IAAAA,iDAAqB;IAChD,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,oBAAoBC,IAAAA,kBAAW,EAAC;QAClC,IAAIC;QACJ,IAAI,CAACJ,gBAAgB;YACjB;QACJ;QACA,IAAIK;QACJ,MAAMC,+BAA+BN,eAAeO,IAAI,CAACC,YAAY,GAAI,CAAA,AAACH,CAAAA,0CAA0C,AAACD,CAAAA,8BAA8BJ,eAAeS,WAAW,AAAD,MAAO,QAAQL,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BM,WAAW,AAAD,MAAO,QAAQL,4CAA4C,KAAK,IAAIA,0CAA0C,CAAA;QACjY,IAAI,CAACC,8BAA8B;YAC/B;QACJ;QACAN,eAAeW,eAAe,CAACC,SAAS,CAACC,GAAG,CAACjB;QAC7CI,eAAeO,IAAI,CAACK,SAAS,CAACC,GAAG,CAACf;QAClC;IACJ,GAAG;QACCE;QACAJ;QACAE;KACH;IACD,MAAMgB,mBAAmBX,IAAAA,kBAAW,EAAC;QACjC,IAAI,CAACH,gBAAgB;YACjB;QACJ;QACAA,eAAeW,eAAe,CAACC,SAAS,CAACG,MAAM,CAACnB;QAChDI,eAAeO,IAAI,CAACK,SAAS,CAACG,MAAM,CAACjB;IACzC,GAAG;QACCE;QACAJ;QACAE;KACH;IACD,OAAO;QACHI;QACAY;IACJ;AACJ"}
|
|
@@ -2,13 +2,24 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
useHTMLNoScrollStyles: function() {
|
|
8
13
|
return useHTMLNoScrollStyles;
|
|
14
|
+
},
|
|
15
|
+
useBodyNoScrollStyles: function() {
|
|
16
|
+
return useBodyNoScrollStyles;
|
|
9
17
|
}
|
|
10
18
|
});
|
|
11
19
|
const _react = require("@griffel/react");
|
|
12
20
|
const useHTMLNoScrollStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r6pzz3z", null, [
|
|
13
21
|
".r6pzz3z{overflow-y:hidden;overflow-y:clip;scrollbar-gutter:stable;}"
|
|
22
|
+
]);
|
|
23
|
+
const useBodyNoScrollStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r144vlu9", null, [
|
|
24
|
+
".r144vlu9{overflow-y:hidden;}"
|
|
14
25
|
]); //# sourceMappingURL=useDisableBodyScroll.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["import { __resetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = /*#__PURE__*/__resetStyles(\"r6pzz3z\", null, [\".r6pzz3z{overflow-y:hidden;overflow-y:clip;scrollbar-gutter:stable;}\"]);\n//# sourceMappingURL=useDisableBodyScroll.styles.js.map"],"names":["useHTMLNoScrollStyles","__resetStyles"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["import { __resetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = /*#__PURE__*/__resetStyles(\"r6pzz3z\", null, [\".r6pzz3z{overflow-y:hidden;overflow-y:clip;scrollbar-gutter:stable;}\"]);\nexport const useBodyNoScrollStyles = /*#__PURE__*/__resetStyles(\"r144vlu9\", null, [\".r144vlu9{overflow-y:hidden;}\"]);\n//# sourceMappingURL=useDisableBodyScroll.styles.js.map"],"names":["useHTMLNoScrollStyles","useBodyNoScrollStyles","__resetStyles"],"mappings":";;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IACAC,qBAAqB;eAArBA;;;uBAHiB;AAEvB,MAAMD,wBAAwB,WAAW,GAAEE,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAuE;AAClJ,MAAMD,wBAAwB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAgC,GACnH,uDAAuD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.10.
|
|
3
|
+
"version": "9.10.6",
|
|
4
4
|
"description": "Dialog component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -40,18 +40,18 @@
|
|
|
40
40
|
"@fluentui/scripts-tasks": "*"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@fluentui/react-utilities": "^9.18.
|
|
44
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
43
|
+
"@fluentui/react-utilities": "^9.18.9",
|
|
44
|
+
"@fluentui/react-jsx-runtime": "^9.0.38",
|
|
45
45
|
"react-transition-group": "^4.4.1",
|
|
46
46
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
47
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
48
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
49
|
-
"@fluentui/react-aria": "^9.11.
|
|
50
|
-
"@fluentui/react-icons": "^2.0.
|
|
51
|
-
"@fluentui/react-tabster": "^9.21.
|
|
47
|
+
"@fluentui/react-context-selector": "^9.1.60",
|
|
48
|
+
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
49
|
+
"@fluentui/react-aria": "^9.11.3",
|
|
50
|
+
"@fluentui/react-icons": "^2.0.239",
|
|
51
|
+
"@fluentui/react-tabster": "^9.21.3",
|
|
52
52
|
"@fluentui/react-theme": "^9.1.19",
|
|
53
|
-
"@fluentui/react-portal": "^9.4.
|
|
54
|
-
"@griffel/react": "^1.5.
|
|
53
|
+
"@fluentui/react-portal": "^9.4.25",
|
|
54
|
+
"@griffel/react": "^1.5.22",
|
|
55
55
|
"@swc/helpers": "^0.5.1"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|