@fluentui/react-dialog 9.9.5 → 9.9.7

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +32 -2
  2. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +40 -9
  3. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  4. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +44 -12
  5. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  6. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,12 +1,42 @@
1
1
  # Change Log - @fluentui/react-dialog
2
2
 
3
- This log was last generated on Tue, 16 Jan 2024 13:07:11 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 18 Jan 2024 14:19:09 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.9.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.9.7)
8
+
9
+ Thu, 18 Jan 2024 14:19:09 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.6..@fluentui/react-dialog_v9.9.7)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-utilities to v9.16.1 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v9.0.27 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
16
+ - Bump @fluentui/react-context-selector to v9.1.49 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v9.14.0 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
18
+ - Bump @fluentui/react-aria to v9.7.3 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
19
+ - Bump @fluentui/react-tabster to v9.17.3 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
20
+ - Bump @fluentui/react-portal to v9.4.10 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
21
+
22
+ ## [9.9.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.9.6)
23
+
24
+ Wed, 17 Jan 2024 16:18:49 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.5..@fluentui/react-dialog_v9.9.6)
26
+
27
+ ### Patches
28
+
29
+ - fix: only apply transition css properties when animating ([PR #30327](https://github.com/microsoft/fluentui/pull/30327) by marcosvmmoura@gmail.com)
30
+ - Bump @fluentui/react-utilities to v9.16.0 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
31
+ - Bump @fluentui/react-jsx-runtime to v9.0.26 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
32
+ - Bump @fluentui/react-context-selector to v9.1.48 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
33
+ - Bump @fluentui/react-aria to v9.7.2 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
34
+ - Bump @fluentui/react-tabster to v9.17.2 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
35
+ - Bump @fluentui/react-portal to v9.4.9 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
36
+
7
37
  ## [9.9.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.9.5)
8
38
 
9
- Tue, 16 Jan 2024 13:07:11 GMT
39
+ Tue, 16 Jan 2024 13:14:17 GMT
10
40
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.4..@fluentui/react-dialog_v9.9.5)
11
41
 
12
42
  ### Patches
package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js CHANGED
@@ -13,44 +13,75 @@ const useRootBaseStyle = /*#__PURE__*/__resetStyles("rhhzfde", "r1n1tr5u", {
13
13
  r: [".rhhzfde{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-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);}", ".rhhzfde:focus{outline-style:none;}", ".rhhzfde:focus-visible{outline-style:none;}", ".rhhzfde[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rhhzfde[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);}", ".r1n1tr5u{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-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);}", ".r1n1tr5u:focus{outline-style:none;}", ".r1n1tr5u:focus-visible{outline-style:none;}", ".r1n1tr5u[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1n1tr5u[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){.rhhzfde[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){.rhhzfde{max-width:100vw;}}", "@media (forced-colors: active){.r1n1tr5u[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){.r1n1tr5u{max-width:100vw;}}"]
15
15
  });
16
+ const rootVisible = {
17
+ boxShadow: tokens.shadow64,
18
+ transform: 'scale(1) translateZ(0)',
19
+ opacity: 1
20
+ };
21
+ const rootWhenAnimating = {
22
+ transitionDuration: tokens.durationGentle,
23
+ transitionProperty: 'opacity, transform, box-shadow',
24
+ // // FIXME: https://github.com/microsoft/fluentui/issues/29473
25
+ transitionTimingFunction: tokens.curveDecelerateMid
26
+ };
16
27
  const useRootStyles = /*#__PURE__*/__styles({
17
28
  animated: {
18
29
  abs64n: "fk73vx1",
19
- B3o57yi: "fc397y7",
20
- Bmy1vo4: "f1b86uth",
21
- Bkqvd7p: "f18ad807",
22
30
  E5pizo: "f1yzz98r",
23
31
  Bz10aip: "f15ofi6c"
24
32
  },
33
+ "static": {
34
+ E5pizo: "f10nrhrw"
35
+ },
25
36
  unmounted: {},
26
- entering: {},
37
+ entering: {
38
+ B3o57yi: "fc397y7",
39
+ Bmy1vo4: "f1b86uth",
40
+ Bkqvd7p: "f18ad807",
41
+ E5pizo: "f10nrhrw",
42
+ Bz10aip: "f186d0ee",
43
+ abs64n: "f5p0z4x"
44
+ },
27
45
  entered: {
28
46
  E5pizo: "f10nrhrw",
29
47
  Bz10aip: "f186d0ee",
30
48
  abs64n: "f5p0z4x"
31
49
  },
32
- idle: {},
50
+ idle: {
51
+ E5pizo: "f10nrhrw",
52
+ Bz10aip: "f186d0ee",
53
+ abs64n: "f5p0z4x"
54
+ },
33
55
  exiting: {
56
+ B3o57yi: "fc397y7",
57
+ Bmy1vo4: "f1b86uth",
34
58
  Bkqvd7p: "f1mfizis"
35
59
  },
36
60
  exited: {}
37
61
  }, {
38
- d: [".fk73vx1{opacity:0;}", ".fc397y7{transition-duration:var(--durationGentle);}", ".f1b86uth{transition-property:opacity,transform,box-shadow;}", ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".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);}", ".f186d0ee{transform:scale(1) translateZ(0);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
62
+ 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);}"]
39
63
  });
40
64
  /**
41
65
  * Styles for the backdrop slot
42
66
  */
67
+ const backdropVisible = {
68
+ opacity: 1
69
+ };
43
70
  const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("raidwwn", "r17vltcu", [".raidwwn{top:0px;right:0px;bottom:0px;left: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;}", ".r17vltcu{top:0px;left:0px;bottom:0px;right: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;}"]);
44
71
  const useBackdropStyles = /*#__PURE__*/__styles({
45
72
  nestedDialogBackdrop: {
46
73
  De3pzq: "f1c21dwh"
47
74
  },
48
75
  unmounted: {},
49
- entering: {},
76
+ entering: {
77
+ abs64n: "f5p0z4x"
78
+ },
50
79
  entered: {
51
80
  abs64n: "f5p0z4x"
52
81
  },
53
- idle: {},
82
+ idle: {
83
+ abs64n: "f5p0z4x"
84
+ },
54
85
  exiting: {
55
86
  Bkqvd7p: "f1mfizis"
56
87
  },
@@ -72,7 +103,7 @@ export const useDialogSurfaceStyles_unstable = state => {
72
103
  const rootStyles = useRootStyles();
73
104
  const backdropBaseStyle = useBackdropBaseStyle();
74
105
  const backdropStyles = useBackdropStyles();
75
- root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus && rootStyles.animated, transitionStatus && rootStyles[transitionStatus], root.className);
106
+ root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);
76
107
  if (backdrop) {
77
108
  backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);
78
109
  }
package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useRootStyles","animated","abs64n","B3o57yi","Bmy1vo4","Bkqvd7p","E5pizo","Bz10aip","unmounted","entering","entered","idle","exiting","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 ...shorthands.inset(0),\n ...shorthands.padding(0),\n ...shorthands.padding(SURFACE_PADDING),\n ...shorthands.margin('auto'),\n ...shorthands.borderStyle('none'),\n ...shorthands.overflow('unset'),\n ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n ...shorthands.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});\nconst useRootStyles = makeStyles({\n animated: {\n // initial style before animation:\n opacity: 0,\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid,\n boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n transform: 'scale(0.85) translateZ(0)'\n },\n unmounted: {},\n entering: {},\n entered: {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n },\n idle: {},\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropBaseStyle = makeResetStyles({\n ...shorthands.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: {},\n entered: {\n opacity: 1\n },\n idle: {},\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, 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,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACvG,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAuB5B,CAAC;AACF,MAAMC,aAAa,gBAAGd,QAAA;EAAAe,QAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;EAAAC,QAAA;EAAAC,OAAA;IAAAJ,MAAA;IAAAC,OAAA;IAAAL,MAAA;EAAA;EAAAS,IAAA;EAAAC,OAAA;IAAAP,OAAA;EAAA;EAAAQ,MAAA;AAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAG9B,aAAA,2gBAUhC,CAAC;AACF,MAAM+B,iBAAiB,gBAAG9B,QAAA;EAAA+B,oBAAA;IAAAC,MAAA;EAAA;EAAAV,SAAA;EAAAC,QAAA;EAAAC,OAAA;IAAAR,MAAA;EAAA;EAAAS,IAAA;EAAAC,OAAA;IAAAP,OAAA;EAAA;EAAAQ,MAAA;AAAA;EAAAC,CAAA;AAAA,CAczB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAE1B,IAAI;IAAEC,QAAQ;IAAE0B;EAAiB,CAAC,GAAGF,KAAK;EAClE,MAAMG,aAAa,GAAG1B,gBAAgB,CAAC,CAAC;EACxC,MAAM2B,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1CrB,IAAI,CAACgC,SAAS,GAAGxC,YAAY,CAACO,uBAAuB,CAACC,IAAI,EAAE4B,aAAa,EAAED,gBAAgB,IAAIE,UAAU,CAACvB,QAAQ,EAAEqB,gBAAgB,IAAIE,UAAU,CAACF,gBAAgB,CAAC,EAAE3B,IAAI,CAACgC,SAAS,CAAC;EACrL,IAAI/B,QAAQ,EAAE;IACVA,QAAQ,CAAC+B,SAAS,GAAGxC,YAAY,CAACO,uBAAuB,CAACE,QAAQ,EAAE6B,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAEK,gBAAgB,IAAII,cAAc,CAACJ,gBAAgB,CAAC,EAAE1B,QAAQ,CAAC+B,SAAS,CAAC;EAC3N;EACA,OAAOP,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","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, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 ...shorthands.inset(0),\n ...shorthands.padding(0),\n ...shorthands.padding(SURFACE_PADDING),\n ...shorthands.margin('auto'),\n ...shorthands.borderStyle('none'),\n ...shorthands.overflow('unset'),\n ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n ...shorthands.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});\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 ...shorthands.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,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACvG,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAuB5B,CAAC;AACF,MAAMC,WAAW,GAAG;EAChBC,SAAS,EAAEZ,MAAM,CAACa,QAAQ;EAC1BC,SAAS,EAAE,wBAAwB;EACnCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,GAAG;EACtBC,kBAAkB,EAAEjB,MAAM,CAACkB,cAAc;EACzCC,kBAAkB,EAAE,gCAAgC;EACpD;EACAC,wBAAwB,EAAEpB,MAAM,CAACqB;AACrC,CAAC;AACD,MAAMC,aAAa,gBAAGzB,QAAA;EAAA0B,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,gBAAG1C,aAAA,2gBAU5B,CAAC;AACF,MAAM2C,iBAAiB,gBAAG1C,QAAA;EAAA2C,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,GAAGpD,YAAY,CAACO,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,GAAGpD,YAAY,CAACO,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"}
package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js CHANGED
@@ -17,6 +17,7 @@ _export(exports, {
17
17
  }
18
18
  });
19
19
  const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
20
21
  const dialogSurfaceClassNames = {
21
22
  root: 'fui-DialogSurface',
22
23
  backdrop: 'fui-DialogSurface__backdrop'
@@ -43,36 +44,60 @@ const dialogSurfaceClassNames = {
43
44
  "@media screen and (max-width: 480px){.r1n1tr5u{max-width:100vw;}}"
44
45
  ]
45
46
  });
47
+ const rootVisible = {
48
+ boxShadow: _reacttheme.tokens.shadow64,
49
+ transform: 'scale(1) translateZ(0)',
50
+ opacity: 1
51
+ };
52
+ const rootWhenAnimating = {
53
+ transitionDuration: _reacttheme.tokens.durationGentle,
54
+ transitionProperty: 'opacity, transform, box-shadow',
55
+ // // FIXME: https://github.com/microsoft/fluentui/issues/29473
56
+ transitionTimingFunction: _reacttheme.tokens.curveDecelerateMid
57
+ };
46
58
  const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
47
59
  animated: {
48
60
  abs64n: "fk73vx1",
49
- B3o57yi: "fc397y7",
50
- Bmy1vo4: "f1b86uth",
51
- Bkqvd7p: "f18ad807",
52
61
  E5pizo: "f1yzz98r",
53
62
  Bz10aip: "f15ofi6c"
54
63
  },
64
+ "static": {
65
+ E5pizo: "f10nrhrw"
66
+ },
55
67
  unmounted: {},
56
- entering: {},
68
+ entering: {
69
+ B3o57yi: "fc397y7",
70
+ Bmy1vo4: "f1b86uth",
71
+ Bkqvd7p: "f18ad807",
72
+ E5pizo: "f10nrhrw",
73
+ Bz10aip: "f186d0ee",
74
+ abs64n: "f5p0z4x"
75
+ },
57
76
  entered: {
58
77
  E5pizo: "f10nrhrw",
59
78
  Bz10aip: "f186d0ee",
60
79
  abs64n: "f5p0z4x"
61
80
  },
62
- idle: {},
81
+ idle: {
82
+ E5pizo: "f10nrhrw",
83
+ Bz10aip: "f186d0ee",
84
+ abs64n: "f5p0z4x"
85
+ },
63
86
  exiting: {
87
+ B3o57yi: "fc397y7",
88
+ Bmy1vo4: "f1b86uth",
64
89
  Bkqvd7p: "f1mfizis"
65
90
  },
66
91
  exited: {}
67
92
  }, {
68
93
  d: [
69
94
  ".fk73vx1{opacity:0;}",
70
- ".fc397y7{transition-duration:var(--durationGentle);}",
71
- ".f1b86uth{transition-property:opacity,transform,box-shadow;}",
72
- ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
73
95
  ".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}",
74
96
  ".f15ofi6c{transform:scale(0.85) translateZ(0);}",
75
97
  ".f10nrhrw{box-shadow:var(--shadow64);}",
98
+ ".fc397y7{transition-duration:var(--durationGentle);}",
99
+ ".f1b86uth{transition-property:opacity,transform,box-shadow;}",
100
+ ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
76
101
  ".f186d0ee{transform:scale(1) translateZ(0);}",
77
102
  ".f5p0z4x{opacity:1;}",
78
103
  ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"
@@ -80,7 +105,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
80
105
  });
81
106
  /**
82
107
  * Styles for the backdrop slot
83
- */ const useBackdropBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("raidwwn", "r17vltcu", [
108
+ */ const backdropVisible = {
109
+ opacity: 1
110
+ };
111
+ const useBackdropBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("raidwwn", "r17vltcu", [
84
112
  ".raidwwn{top:0px;right:0px;bottom:0px;left: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;}",
85
113
  ".r17vltcu{top:0px;left:0px;bottom:0px;right: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;}"
86
114
  ]);
@@ -89,11 +117,15 @@ const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
89
117
  De3pzq: "f1c21dwh"
90
118
  },
91
119
  unmounted: {},
92
- entering: {},
120
+ entering: {
121
+ abs64n: "f5p0z4x"
122
+ },
93
123
  entered: {
94
124
  abs64n: "f5p0z4x"
95
125
  },
96
- idle: {},
126
+ idle: {
127
+ abs64n: "f5p0z4x"
128
+ },
97
129
  exiting: {
98
130
  Bkqvd7p: "f1mfizis"
99
131
  },
@@ -111,7 +143,7 @@ const useDialogSurfaceStyles_unstable = (state)=>{
111
143
  const rootStyles = useRootStyles();
112
144
  const backdropBaseStyle = useBackdropBaseStyle();
113
145
  const backdropStyles = useBackdropStyles();
114
- root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus && rootStyles.animated, transitionStatus && rootStyles[transitionStatus], root.className);
146
+ root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);
115
147
  if (backdrop) {
116
148
  backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);
117
149
  }
package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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(\"rhhzfde\", \"r1n1tr5u\", {\n r: [\".rhhzfde{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-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);}\", \".rhhzfde:focus{outline-style:none;}\", \".rhhzfde:focus-visible{outline-style:none;}\", \".rhhzfde[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rhhzfde[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);}\", \".r1n1tr5u{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-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);}\", \".r1n1tr5u:focus{outline-style:none;}\", \".r1n1tr5u:focus-visible{outline-style:none;}\", \".r1n1tr5u[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1n1tr5u[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){.rhhzfde[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){.rhhzfde{max-width:100vw;}}\", \"@media (forced-colors: active){.r1n1tr5u[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){.r1n1tr5u{max-width:100vw;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n animated: {\n abs64n: \"fk73vx1\",\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f18ad807\",\n E5pizo: \"f1yzz98r\",\n Bz10aip: \"f15ofi6c\"\n },\n unmounted: {},\n entering: {},\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {},\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".fc397y7{transition-duration:var(--durationGentle);}\", \".f1b86uth{transition-property:opacity,transform,box-shadow;}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".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);}\", \".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 useBackdropBaseStyle = /*#__PURE__*/__resetStyles(\"raidwwn\", \"r17vltcu\", [\".raidwwn{top:0px;right:0px;bottom:0px;left: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;}\", \".r17vltcu{top:0px;left:0px;bottom:0px;right: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 entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {},\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, 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","useRootStyles","__styles","animated","abs64n","B3o57yi","Bmy1vo4","Bkqvd7p","E5pizo","Bz10aip","unmounted","entering","entered","idle","exiting","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA2DAC,+BAA+B;eAA/BA;;;uBA/DqD;AAI3D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IACzEC,GAAG;QAAC;QAA8kC;QAAuC;QAA+C;QAAgK;QAAkvB;QAA+kC;QAAwC;QAAgD;QAAiK;KAAkvB;IACpnIC,GAAG;QAAC;QAA+L;QAAoE;QAAgM;KAAoE;AAC7gB;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPJ,QAAQ;QACRC,SAAS;QACTL,QAAQ;IACV;IACAS,MAAM,CAAC;IACPC,SAAS;QACPP,SAAS;IACX;IACAQ,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAwB;QAAwD;QAAgE;QAAoE;QAA6D;QAAmD;QAA0C;QAAgD;QAAwB;KAAmE;AAC/f;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEnB,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAyP;CAAyP;AAClkB,MAAMoB,oBAAoB,WAAW,GAAEhB,IAAAA,eAAQ,EAAC;IAC9CiB,sBAAsB;QACpBC,QAAQ;IACV;IACAV,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPR,QAAQ;IACV;IACAS,MAAM,CAAC;IACPC,SAAS;QACPP,SAAS;IACX;IACAQ,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMtB,kCAAkC2B,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACd3B,IAAI,EACJC,QAAQ,EACR2B,gBAAgB,EACjB,GAAGF;IACJ,MAAMG,gBAAgB3B;IACtB,MAAM4B,aAAaxB;IACnB,MAAMyB,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBvB,KAAKiC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,wBAAwBE,IAAI,EAAE6B,eAAeD,oBAAoBE,WAAWtB,QAAQ,EAAEoB,oBAAoBE,UAAU,CAACF,iBAAiB,EAAE5B,KAAKiC,SAAS;IACpL,IAAIhC,UAAU;QACZA,SAASgC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,wBAAwBG,QAAQ,EAAE8B,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEI,oBAAoBI,cAAc,CAACJ,iBAAiB,EAAE3B,SAASgC,SAAS;IACxN;IACA,OAAOP;AACT,GACA,yDAAyD"}
1
+ {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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(\"rhhzfde\", \"r1n1tr5u\", {\n r: [\".rhhzfde{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-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);}\", \".rhhzfde:focus{outline-style:none;}\", \".rhhzfde:focus-visible{outline-style:none;}\", \".rhhzfde[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rhhzfde[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);}\", \".r1n1tr5u{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-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);}\", \".r1n1tr5u:focus{outline-style:none;}\", \".r1n1tr5u:focus-visible{outline-style:none;}\", \".r1n1tr5u[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1n1tr5u[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){.rhhzfde[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){.rhhzfde{max-width:100vw;}}\", \"@media (forced-colors: active){.r1n1tr5u[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){.r1n1tr5u{max-width:100vw;}}\"]\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(\"raidwwn\", \"r17vltcu\", [\".raidwwn{top:0px;right:0px;bottom:0px;left: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;}\", \".r17vltcu{top:0px;left:0px;bottom:0px;right: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;;;uBA9FqD;4BAC3C;AAGhB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IACzEC,GAAG;QAAC;QAA8kC;QAAuC;QAA+C;QAAgK;QAAkvB;QAA+kC;QAAwC;QAAgD;QAAiK;KAAkvB;IACpnIC,GAAG;QAAC;QAA+L;QAAoE;QAAgM;KAAoE;AAC7gB;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,WAAW,YAAY;IAAC;IAAyP;CAAyP;AAClkB,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-dialog",
3
- "version": "9.9.5",
3
+ "version": "9.9.7",
4
4
  "description": "Dialog component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -36,17 +36,17 @@
36
36
  "@fluentui/scripts-tasks": "*"
37
37
  },
38
38
  "dependencies": {
39
- "@fluentui/react-utilities": "^9.15.6",
40
- "@fluentui/react-jsx-runtime": "^9.0.25",
39
+ "@fluentui/react-utilities": "^9.16.1",
40
+ "@fluentui/react-jsx-runtime": "^9.0.27",
41
41
  "react-transition-group": "^4.4.1",
42
42
  "@fluentui/keyboard-keys": "^9.0.7",
43
- "@fluentui/react-context-selector": "^9.1.47",
44
- "@fluentui/react-shared-contexts": "^9.13.2",
45
- "@fluentui/react-aria": "^9.7.1",
43
+ "@fluentui/react-context-selector": "^9.1.49",
44
+ "@fluentui/react-shared-contexts": "^9.14.0",
45
+ "@fluentui/react-aria": "^9.7.3",
46
46
  "@fluentui/react-icons": "^2.0.224",
47
- "@fluentui/react-tabster": "^9.17.1",
47
+ "@fluentui/react-tabster": "^9.17.3",
48
48
  "@fluentui/react-theme": "^9.1.16",
49
- "@fluentui/react-portal": "^9.4.8",
49
+ "@fluentui/react-portal": "^9.4.10",
50
50
  "@griffel/react": "^1.5.14",
51
51
  "@swc/helpers": "^0.5.1"
52
52
  },