@itwin/appui-react 5.30.0 → 5.31.0

package/lib/appui-react/widget-panels/ModalFrontstageComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFrontstageComposer.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/ModalFrontstageComposer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,gBAAgB;AAChB,MAAM,UAAU,4BAA4B;IAC1C,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAC7D,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAChE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,WAAW,CAAC,WAAW,CAAC,6BAA6B,CAAC,WAAW,CACtE,CAAC,IAAI,EAAE,EAAE;YACP,4BAA4B,CAC1B,IAAI,CAAC,oBAAoB,KAAK,CAAC;gBAC7B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,qBAAqB,CAClD,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,4BAA4B,CAAC,CAAC,CAAC;IACnC,OAAO,yBAAyB,CAAC;AACnC,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,uBAAuB,CAAC,EACtC,SAAS,GAGV;IACC,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,oBAAoB,EAAE,EACpD,EAAE,CACH,CAAC;IACF,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC;IAE9D,OAAO,CACL,oBAAC,eAAe,IACd,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,gBAAgB,EAC5B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,IAErB,OAAO,CACQ,CACnB,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Frontstage\n */\nimport * as React from \"react\";\nimport type { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages.js\";\nimport { ModalFrontstage } from \"../frontstage/ModalFrontstage.js\";\nimport { UiFramework } from \"../UiFramework.js\";\n\n/** @internal */\nexport function useActiveModalFrontstageInfo() {\n  const [activeModalFrontstageInfo, setActiveModalFrontstageInfo] =\n    React.useState(UiFramework.frontstages.activeModalFrontstage);\n  React.useEffect(() => {\n    return UiFramework.frontstages.onModalFrontstageChangedEvent.addListener(\n      (args) => {\n        setActiveModalFrontstageInfo(\n          args.modalFrontstageCount === 0\n            ? undefined\n            : UiFramework.frontstages.activeModalFrontstage\n        );\n      }\n    );\n  }, [setActiveModalFrontstageInfo]);\n  return activeModalFrontstageInfo;\n}\n\n/** @internal */\nexport function ModalFrontstageComposer({\n  stageInfo,\n}: {\n  stageInfo: ModalFrontstageInfo | undefined;\n}) {\n  const handleCloseModal = React.useCallback(\n    () => UiFramework.frontstages.closeModalFrontstage(),\n    []\n  );\n  if (!stageInfo) return null;\n\n  const { title, content, appBarRight, backButton } = stageInfo;\n\n  return (\n    <ModalFrontstage\n      isOpen={true}\n      title={title}\n      closeModal={handleCloseModal}\n      appBarRight={appBarRight}\n      backButton={backButton}\n    >\n      {content}\n    </ModalFrontstage>\n  );\n}\n"]}
+{"version":3,"file":"ModalFrontstageComposer.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/ModalFrontstageComposer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AAEnF,gBAAgB;AAChB,MAAM,UAAU,uBAAuB;IACrC,MAAM,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC1E,MAAM,IAAI,GAAG,wBAAwB,EAAE,CAAC;IACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,oBAAoB,EAAE,EACpD,EAAE,CACH,CAAC;IAEF,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,0CACG,qBAAqB,CAAC,CAAC,CAAC,CACvB,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAC9C,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,IACd,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,IAE1B,IAAI,CAAC,OAAO,CACG,CACnB,CACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Frontstage\n */\nimport * as React from \"react\";\nimport { ModalFrontstage } from \"../frontstage/ModalFrontstage.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { useActiveModalFrontstage } from \"../hooks/useActiveModalFrontstage.js\";\nimport { ConfigurableUiContext } from \"../configurableui/ConfigurableUiContent.js\";\n\n/** @internal */\nexport function ModalFrontstageComposer() {\n  const { renderModalFrontstage } = React.useContext(ConfigurableUiContext);\n  const info = useActiveModalFrontstage();\n  const handleCloseModal = React.useCallback(\n    () => UiFramework.frontstages.closeModalFrontstage(),\n    []\n  );\n\n  if (!info) return null;\n  return (\n    <>\n      {renderModalFrontstage ? (\n        renderModalFrontstage({ info, isOpen: true })\n      ) : (\n        <ModalFrontstage\n          isOpen={true}\n          title={info.title}\n          navigateBack={handleCloseModal}\n          appBarRight={info.appBarRight}\n          backButton={info.backButton}\n        >\n          {info.content}\n        </ModalFrontstage>\n      )}\n    </>\n  );\n}\n"]}

package/lib/cjs/appui-react/frontstage/ModalFrontstage.scss

@@ -13,15 +13,21 @@
   pointer-events: none;
   visibility: hidden;
   overflow: hidden;
-  background: transparent;
+  background: color-mix(
+    in srgb,
+    var(--iui-color-background-backdrop),
+    transparent 5%
+  );
   transition: background 0.25s ease, visibility 0s ease 0.275s;
 
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
   @include uicore-z-index(modal-frontstage);
 
+  &:not(.uifw-no-header) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .uifw-modal-app-bar {
     transition: transform 0.125s;
     padding: 10px;
@@ -62,15 +68,3 @@
     }
   }
 }
-
-.uifw-modal-frontstage-overlay {
-  position: absolute;
-  left: 0px;
-  width: 100%;
-  top: 0px;
-  height: 100%;
-  opacity: 0.95;
-  background: var(--iui-color-background-backdrop);
-
-  @include uicore-z-index(modal-frontstage-overlay);
-}

package/lib/esm/appui-react/frontstage/ModalFrontstage.scss

@@ -13,15 +13,21 @@
   pointer-events: none;
   visibility: hidden;
   overflow: hidden;
-  background: transparent;
+  background: color-mix(
+    in srgb,
+    var(--iui-color-background-backdrop),
+    transparent 5%
+  );
   transition: background 0.25s ease, visibility 0s ease 0.275s;
 
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
   @include uicore-z-index(modal-frontstage);
 
+  &:not(.uifw-no-header) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .uifw-modal-app-bar {
     transition: transform 0.125s;
     padding: 10px;
@@ -62,15 +68,3 @@
     }
   }
 }
-
-.uifw-modal-frontstage-overlay {
-  position: absolute;
-  left: 0px;
-  width: 100%;
-  top: 0px;
-  height: 100%;
-  opacity: 0.95;
-  background: var(--iui-color-background-backdrop);
-
-  @include uicore-z-index(modal-frontstage-overlay);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.30.0",
+  "version": "5.31.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.30.0",
-    "@itwin/core-react": "5.30.0",
-    "@itwin/imodel-components-react": "5.30.0"
+    "@itwin/components-react": "5.31.0",
+    "@itwin/core-react": "5.31.0",
+    "@itwin/imodel-components-react": "5.31.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^5.8.1",
@@ -89,9 +89,9 @@
     "typescript": "~5.6.3",
     "upath": "^2.0.1",
     "vitest": "^3.2.4",
-    "@itwin/components-react": "5.30.0",
-    "@itwin/core-react": "5.30.0",
-    "@itwin/imodel-components-react": "5.30.0"
+    "@itwin/components-react": "5.31.0",
+    "@itwin/imodel-components-react": "5.31.0",
+    "@itwin/core-react": "5.31.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.11.0",