@fluentui/react-dialog
Advanced tools
Comparing version
@@ -25,9 +25,10 @@ "use strict"; | ||
* Styles for the root slot | ||
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1h3qql9", null, { | ||
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rzfgfes", null, { | ||
r: [ | ||
".r1h3qql9{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}" | ||
".rzfgfes{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}" | ||
], | ||
s: [ | ||
"@media screen and (max-width: 480px){.r1h3qql9{max-width:100vw;grid-template-rows:auto 1fr auto;}}", | ||
"@media screen and (max-height: 359px){.r1h3qql9{max-height:unset;}}" | ||
"@supports (height: 1dvh){.rzfgfes{max-height:calc(100dvh - 2 * 24px);}}", | ||
"@media screen and (max-width: 480px){.rzfgfes{max-width:100vw;grid-template-rows:auto 1fr auto;}}", | ||
"@media screen and (max-height: 359px){.rzfgfes{max-height:unset;}}" | ||
] | ||
@@ -34,0 +35,0 @@ }); |
@@ -26,22 +26,24 @@ "use strict"; | ||
* Styles for the root slot | ||
*/ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rsmdyd3", "rup8wml", { | ||
*/ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r5905w0", "ru9dzwv", { | ||
r: [ | ||
".rsmdyd3{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);box-shadow:var(--shadow64);}", | ||
".rsmdyd3:focus{outline-style:none;}", | ||
".rsmdyd3:focus-visible{outline-style:none;}", | ||
".rsmdyd3[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", | ||
".rsmdyd3[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", | ||
".rup8wml{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);box-shadow:var(--shadow64);}", | ||
".rup8wml:focus{outline-style:none;}", | ||
".rup8wml:focus-visible{outline-style:none;}", | ||
".rup8wml[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", | ||
".rup8wml[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}" | ||
".r5905w0{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);box-shadow:var(--shadow64);}", | ||
".r5905w0:focus{outline-style:none;}", | ||
".r5905w0:focus-visible{outline-style:none;}", | ||
".r5905w0[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", | ||
".r5905w0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", | ||
".ru9dzwv{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);box-shadow:var(--shadow64);}", | ||
".ru9dzwv:focus{outline-style:none;}", | ||
".ru9dzwv:focus-visible{outline-style:none;}", | ||
".ru9dzwv[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", | ||
".ru9dzwv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}" | ||
], | ||
s: [ | ||
"@media (forced-colors: active){.rsmdyd3[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){.rsmdyd3{max-width:100vw;}}", | ||
"@media screen and (max-height: 359px){.rsmdyd3{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", | ||
"@media (forced-colors: active){.rup8wml[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){.rup8wml{max-width:100vw;}}", | ||
"@media screen and (max-height: 359px){.rup8wml{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}" | ||
"@media (forced-colors: active){.r5905w0[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", | ||
"@supports (height: 1dvh){.r5905w0{max-height:100dvh;}}", | ||
"@media screen and (max-width: 480px){.r5905w0{max-width:100vw;}}", | ||
"@media screen and (max-height: 359px){.r5905w0{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", | ||
"@media (forced-colors: active){.ru9dzwv[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", | ||
"@supports (height: 1dvh){.ru9dzwv{max-height:100dvh;}}", | ||
"@media screen and (max-width: 480px){.ru9dzwv{max-width:100vw;}}", | ||
"@media screen and (max-height: 359px){.ru9dzwv{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}" | ||
] | ||
@@ -52,3 +54,3 @@ }); | ||
]); | ||
const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({ | ||
const useStyles = /*#__PURE__*/ (0, _react.__styles)({ | ||
nestedDialogBackdrop: { | ||
@@ -67,8 +69,8 @@ De3pzq: "f1c21dwh" | ||
const backdropBaseStyle = useBackdropBaseStyle(); | ||
const backdropStyles = useBackdropStyles(); | ||
const styles = useStyles(); | ||
root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, root.className); | ||
if (backdrop) { | ||
backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className); | ||
backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, backdrop.className); | ||
} | ||
return state; | ||
}; |
@@ -9,5 +9,5 @@ import { __resetStyles, mergeClasses } from '@griffel/react'; | ||
*/ | ||
const useResetStyles = /*#__PURE__*/__resetStyles("r1h3qql9", null, { | ||
r: [".r1h3qql9{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"], | ||
s: ["@media screen and (max-width: 480px){.r1h3qql9{max-width:100vw;grid-template-rows:auto 1fr auto;}}", "@media screen and (max-height: 359px){.r1h3qql9{max-height:unset;}}"] | ||
const useResetStyles = /*#__PURE__*/__resetStyles("rzfgfes", null, { | ||
r: [".rzfgfes{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"], | ||
s: ["@supports (height: 1dvh){.rzfgfes{max-height:calc(100dvh - 2 * 24px);}}", "@media screen and (max-width: 480px){.rzfgfes{max-width:100vw;grid-template-rows:auto 1fr auto;}}", "@media screen and (max-height: 359px){.rzfgfes{max-height:unset;}}"] | ||
}); | ||
@@ -14,0 +14,0 @@ /** |
@@ -12,8 +12,8 @@ import { __resetStyles, __styles, mergeClasses } from '@griffel/react'; | ||
*/ | ||
const useRootBaseStyle = /*#__PURE__*/__resetStyles("rsmdyd3", "rup8wml", { | ||
r: [".rsmdyd3{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);box-shadow:var(--shadow64);}", ".rsmdyd3:focus{outline-style:none;}", ".rsmdyd3:focus-visible{outline-style:none;}", ".rsmdyd3[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rsmdyd3[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rup8wml{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);box-shadow:var(--shadow64);}", ".rup8wml:focus{outline-style:none;}", ".rup8wml:focus-visible{outline-style:none;}", ".rup8wml[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rup8wml[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"], | ||
s: ["@media (forced-colors: active){.rsmdyd3[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){.rsmdyd3{max-width:100vw;}}", "@media screen and (max-height: 359px){.rsmdyd3{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.rup8wml[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){.rup8wml{max-width:100vw;}}", "@media screen and (max-height: 359px){.rup8wml{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"] | ||
const useRootBaseStyle = /*#__PURE__*/__resetStyles("r5905w0", "ru9dzwv", { | ||
r: [".r5905w0{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);box-shadow:var(--shadow64);}", ".r5905w0:focus{outline-style:none;}", ".r5905w0:focus-visible{outline-style:none;}", ".r5905w0[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r5905w0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".ru9dzwv{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);box-shadow:var(--shadow64);}", ".ru9dzwv:focus{outline-style:none;}", ".ru9dzwv:focus-visible{outline-style:none;}", ".ru9dzwv[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".ru9dzwv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"], | ||
s: ["@media (forced-colors: active){.r5905w0[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@supports (height: 1dvh){.r5905w0{max-height:100dvh;}}", "@media screen and (max-width: 480px){.r5905w0{max-width:100vw;}}", "@media screen and (max-height: 359px){.r5905w0{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.ru9dzwv[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@supports (height: 1dvh){.ru9dzwv{max-height:100dvh;}}", "@media screen and (max-width: 480px){.ru9dzwv{max-width:100vw;}}", "@media screen and (max-height: 359px){.ru9dzwv{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"] | ||
}); | ||
const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("r1e18s3l", null, [".r1e18s3l{inset:0px;background-color:var(--colorBackgroundOverlay);position:fixed;}"]); | ||
const useBackdropStyles = /*#__PURE__*/__styles({ | ||
const useStyles = /*#__PURE__*/__styles({ | ||
nestedDialogBackdrop: { | ||
@@ -38,8 +38,8 @@ De3pzq: "f1c21dwh" | ||
const backdropBaseStyle = useBackdropBaseStyle(); | ||
const backdropStyles = useBackdropStyles(); | ||
const styles = useStyles(); | ||
root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className); | ||
if (backdrop) { | ||
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className); | ||
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, backdrop.className); | ||
} | ||
return state; | ||
}; |
{ | ||
"name": "@fluentui/react-dialog", | ||
"version": "0.0.0-nightly-20250703-1103.1", | ||
"version": "0.0.0-nightly-20250704-0407.1", | ||
"description": "Dialog component for Fluent UI React", | ||
@@ -15,10 +15,10 @@ "main": "lib-commonjs/index.js", | ||
"devDependencies": { | ||
"@fluentui/react-provider": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-popover": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-tooltip": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-button": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-menu": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-provider": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-popover": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-tooltip": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-button": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-menu": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/eslint-plugin": "*", | ||
"@fluentui/react-conformance": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-conformance": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/scripts-api-extractor": "*", | ||
@@ -28,14 +28,14 @@ "@fluentui/scripts-cypress": "*" | ||
"dependencies": { | ||
"@fluentui/react-utilities": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/keyboard-keys": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-context-selector": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-motion": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-motion-components-preview": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-shared-contexts": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-aria": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-utilities": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/keyboard-keys": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-context-selector": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-motion": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-motion-components-preview": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-shared-contexts": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-aria": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-icons": "^2.0.245", | ||
"@fluentui/react-tabster": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-theme": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-portal": "0.0.0-nightly-20250703-1103.1", | ||
"@fluentui/react-tabster": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-theme": "0.0.0-nightly-20250704-0407.1", | ||
"@fluentui/react-portal": "0.0.0-nightly-20250704-0407.1", | ||
"@griffel/react": "^1.5.22", | ||
@@ -42,0 +42,0 @@ "@swc/helpers": "^0.5.1" |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
518626
-10%249
-8.79%3507
-15.02%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated
Updated
Updated
Updated
Updated
Updated
Updated