@itwin/appui-react 5.30.1 → 5.32.0

package/lib/appui-react/backstage/Backstage.js

@@ -0,0 +1,88 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Backstage
+ */
+import "./Backstage.scss";
+import * as React from "react";
+import classnames from "classnames";
+import { ConditionalBooleanValue, ConditionalStringValue, } from "@itwin/appui-abstract";
+import { Logger } from "@itwin/core-bentley";
+import { Icon as CoreIcon } from "@itwin/core-react";
+import { Badge } from "@itwin/core-react/internal";
+import { Dialog, Divider, Icon, List, ListItem } from "@itwin/itwinui-react";
+import { UiFramework } from "../UiFramework.js";
+import { useActiveFrontstageId } from "../frontstage/FrontstageDef.js";
+import { isProviderItem } from "../ui-items-provider/isProviderItem.js";
+import { useBackstageManager } from "./BackstageManager.js";
+import { useTranslation } from "../hooks/useTranslation.js";
+/** @internal */
+export function Backstage(props) {
+    const { isOpen, onClose, showOverlay, ...rest } = props;
+    const { translate } = useTranslation();
+    return (React.createElement(Dialog, { className: "uifw-backstage-backstage_wrapper", placement: "top-left", isOpen: isOpen, onClose: onClose, closeOnExternalClick: true, preventDocumentScroll: true, trapFocus: true, setFocus: false },
+        React.createElement(Dialog.Backdrop, { className: classnames("uifw-backstage-backstage_backdrop", !showOverlay && "uifw-transparent") }),
+        React.createElement(Dialog.Main, { "aria-label": translate("backstage.label"), ...rest, className: classnames("uifw-backstage-backstage", props.className) },
+            React.createElement(Dialog.Content, { className: "uifw-backstage-backstage_content" }, props.children))));
+}
+function BackstageDivider() {
+    return React.createElement(Divider, { className: "uifw-backstage-backstage_divider" });
+}
+/** @internal */
+export function BackstageGroup(props) {
+    const { index, ...rest } = props;
+    return (React.createElement(React.Fragment, null,
+        index > 0 ? React.createElement(BackstageDivider, null) : null,
+        React.createElement(List, { ...rest }, props.children)));
+}
+function ItemIcon({ icon, iconNode, }) {
+    if (iconNode) {
+        return React.createElement(Icon, { "aria-hidden": "true" }, iconNode);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    return React.createElement(CoreIcon, { iconSpec: icon });
+}
+function BackstageItem(props) {
+    const { item, active, onClick, autoFocus, ...rest } = props;
+    const descriptionId = React.useId();
+    const description = ConditionalStringValue.getValue(item.subtitle);
+    const label = ConditionalStringValue.getValue(item.label);
+    const disabled = ConditionalBooleanValue.getValue(item.isDisabled);
+    return (React.createElement(ListItem, { "data-item-id": item.id, "data-item-type": "backstage-item", "data-item-group-priority": item.groupPriority, "data-item-priority": item.itemPriority, "data-item-provider-id": isProviderItem(item) ? item.providerId : undefined, disabled: disabled, size: "large", active: active, actionable: true, ...rest },
+        React.createElement("div", { className: "uifw-backstage-backstage_badge" },
+            React.createElement(Badge, { type: item.badgeKind || item.badge })),
+        React.createElement(ListItem.Icon, null,
+            React.createElement(ItemIcon, { iconNode: item.iconNode, icon: item.icon })),
+        React.createElement(ListItem.Content, null,
+            React.createElement(ListItem.Action, { onClick: onClick, "aria-describedby": descriptionId, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: autoFocus, "aria-current": active ? "true" : undefined }, label),
+            React.createElement(ListItem.Description, { id: descriptionId }, description))));
+}
+/** @internal */
+export function BackstageActionItem(props) {
+    const { item, ...rest } = props;
+    const manager = useBackstageManager();
+    const handleClick = React.useCallback(() => {
+        manager.close();
+        item.execute();
+    }, [manager, item]);
+    return React.createElement(BackstageItem, { item: item, onClick: handleClick, ...rest });
+}
+/** @internal */
+export function BackstageStageLauncher(props) {
+    const { item, ...rest } = props;
+    const manager = useBackstageManager();
+    const handleClick = React.useCallback(() => {
+        manager.close();
+        if (!UiFramework.frontstages.hasFrontstage(item.stageId))
+            return Logger.logError("BackstageStageLauncher", `Frontstage with id '${item.stageId}' not found`);
+        void UiFramework.frontstages.setActiveFrontstage(item.stageId);
+    }, [manager, item.stageId]);
+    const activeFrontstageId = useActiveFrontstageId();
+    const isActive = ConditionalBooleanValue.getValue(item.isActive ?? item.stageId === activeFrontstageId);
+    return (React.createElement(BackstageItem, { item: item, active: isActive, onClick: handleClick, ...rest }));
+}
+//# sourceMappingURL=Backstage.js.map

package/lib/appui-react/backstage/Backstage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backstage.js","sourceRoot":"","sources":["../../../src/appui-react/backstage/Backstage.tsx"],"names":[],"mappings":"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","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 Backstage\n */\n\nimport \"./Backstage.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n} from \"@itwin/appui-abstract\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { Icon as CoreIcon } from \"@itwin/core-react\";\nimport { Badge } from \"@itwin/core-react/internal\";\nimport { Dialog, Divider, Icon, List, ListItem } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { useActiveFrontstageId } from \"../frontstage/FrontstageDef.js\";\nimport { isProviderItem } from \"../ui-items-provider/isProviderItem.js\";\nimport { useBackstageManager } from \"./BackstageManager.js\";\nimport { useTranslation } from \"../hooks/useTranslation.js\";\n\nimport type {\n  BackstageActionItem as BackstageActionItemDef,\n  BackstageItem as BackstageItemDef,\n  BackstageStageLauncher as BackstageStageLauncherDef,\n  CommonBackstageItem,\n} from \"./BackstageItem.js\";\n\ninterface BackstageProps extends React.ComponentProps<\"div\"> {\n  isOpen: boolean;\n  onClose: () => void;\n  showOverlay: boolean;\n}\n\n/** @internal */\nexport function Backstage(props: BackstageProps) {\n  const { isOpen, onClose, showOverlay, ...rest } = props;\n\n  const { translate } = useTranslation();\n\n  return (\n    <Dialog\n      className=\"uifw-backstage-backstage_wrapper\"\n      placement=\"top-left\"\n      isOpen={isOpen}\n      onClose={onClose}\n      closeOnExternalClick\n      preventDocumentScroll\n      trapFocus\n      setFocus={false}\n    >\n      <Dialog.Backdrop\n        className={classnames(\n          \"uifw-backstage-backstage_backdrop\",\n          !showOverlay && \"uifw-transparent\"\n        )}\n      />\n      <Dialog.Main\n        aria-label={translate(\"backstage.label\")}\n        {...rest}\n        className={classnames(\"uifw-backstage-backstage\", props.className)}\n      >\n        <Dialog.Content className=\"uifw-backstage-backstage_content\">\n          {props.children}\n        </Dialog.Content>\n      </Dialog.Main>\n    </Dialog>\n  );\n}\n\nfunction BackstageDivider() {\n  return <Divider className=\"uifw-backstage-backstage_divider\" />;\n}\n\ninterface BackstageGroupProps {\n  children?: React.ReactNode;\n  index: number;\n}\n\n/** @internal */\nexport function BackstageGroup(props: BackstageGroupProps) {\n  const { index, ...rest } = props;\n  return (\n    <>\n      {index > 0 ? <BackstageDivider /> : null}\n      <List {...rest}>{props.children}</List>\n    </>\n  );\n}\n\nfunction ItemIcon({\n  icon,\n  iconNode,\n}: {\n  icon: CommonBackstageItem[\"icon\"];\n  iconNode: CommonBackstageItem[\"iconNode\"];\n}) {\n  if (iconNode) {\n    return <Icon aria-hidden=\"true\">{iconNode}</Icon>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return <CoreIcon iconSpec={icon} />;\n}\n\ntype ListItemProps = React.ComponentProps<typeof ListItem>;\n\ninterface BackstageItemProps\n  extends Pick<ListItemProps, \"active\" | \"onClick\" | \"autoFocus\"> {\n  item: BackstageItemDef;\n  onClick?: () => void;\n}\n\nfunction BackstageItem(props: BackstageItemProps) {\n  const { item, active, onClick, autoFocus, ...rest } = props;\n\n  const descriptionId = React.useId();\n\n  const description = ConditionalStringValue.getValue(item.subtitle);\n  const label = ConditionalStringValue.getValue(item.label);\n  const disabled = ConditionalBooleanValue.getValue(item.isDisabled);\n  return (\n    <ListItem\n      data-item-id={item.id}\n      data-item-type=\"backstage-item\"\n      data-item-group-priority={item.groupPriority}\n      data-item-priority={item.itemPriority}\n      data-item-provider-id={isProviderItem(item) ? item.providerId : undefined}\n      disabled={disabled}\n      size=\"large\"\n      active={active}\n      actionable\n      {...rest}\n    >\n      <div className=\"uifw-backstage-backstage_badge\">\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Badge type={item.badgeKind || item.badge} />\n      </div>\n      <ListItem.Icon>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <ItemIcon iconNode={item.iconNode} icon={item.icon} />\n      </ListItem.Icon>\n      <ListItem.Content>\n        <ListItem.Action\n          onClick={onClick}\n          aria-describedby={descriptionId}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          aria-current={active ? \"true\" : undefined}\n        >\n          {label}\n        </ListItem.Action>\n        <ListItem.Description id={descriptionId}>\n          {description}\n        </ListItem.Description>\n      </ListItem.Content>\n    </ListItem>\n  );\n}\n\ninterface BackstageActionItemProps extends Pick<ListItemProps, \"autoFocus\"> {\n  readonly item: BackstageActionItemDef;\n}\n\n/** @internal */\nexport function BackstageActionItem(props: BackstageActionItemProps) {\n  const { item, ...rest } = props;\n\n  const manager = useBackstageManager();\n  const handleClick = React.useCallback(() => {\n    manager.close();\n    item.execute();\n  }, [manager, item]);\n  return <BackstageItem item={item} onClick={handleClick} {...rest} />;\n}\n\ninterface BackstageStageLauncherProps extends Pick<ListItemProps, \"autoFocus\"> {\n  readonly item: BackstageStageLauncherDef;\n}\n\n/** @internal */\nexport function BackstageStageLauncher(props: BackstageStageLauncherProps) {\n  const { item, ...rest } = props;\n\n  const manager = useBackstageManager();\n  const handleClick = React.useCallback(() => {\n    manager.close();\n    if (!UiFramework.frontstages.hasFrontstage(item.stageId))\n      return Logger.logError(\n        \"BackstageStageLauncher\",\n        `Frontstage with id '${item.stageId}' not found`\n      );\n    void UiFramework.frontstages.setActiveFrontstage(item.stageId);\n  }, [manager, item.stageId]);\n  const activeFrontstageId = useActiveFrontstageId();\n  const isActive = ConditionalBooleanValue.getValue(\n    item.isActive ?? item.stageId === activeFrontstageId\n  );\n  return (\n    <BackstageItem\n      item={item}\n      active={isActive}\n      onClick={handleClick}\n      {...rest}\n    />\n  );\n}\n"]}

package/lib/appui-react/backstage/Backstage.scss

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as zIndex;
+
+.uifw-backstage-backstage_wrapper {
+  @include zIndex.uicore-z-index(backstage);
+}
+
+.uifw-backstage-backstage {
+  inset-block-end: 0;
+  border-radius: 0;
+  margin-block-start: 0;
+  margin-inline-start: 0;
+}
+
+.uifw-backstage-backstage_backdrop {
+  &:where(.uifw-transparent) {
+    background-color: transparent;
+  }
+}
+
+.uifw-backstage-backstage_content {
+  padding-inline: var(--iui-size-xs);
+}
+
+.uifw-backstage-backstage_divider {
+  $margin-block: var(--iui-size-2xs);
+  $margin-inline: calc(-1 * var(--iui-size-xs));
+
+  margin-block-start: $margin-block;
+  margin-block-end: $margin-block;
+  margin-inline-start: $margin-inline;
+  margin-inline-end: $margin-inline;
+}
+
+.uifw-backstage-backstage_badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}

package/lib/appui-react/backstage/BackstageComposer.d.ts

@@ -4,8 +4,7 @@
 import * as React from "react";
 import type { CommonProps } from "@itwin/core-react";
 import type { BackstageItem } from "./BackstageItem.js";
-/** @internal */
-export type GroupedItems = ReadonlyArray<ReadonlyArray<BackstageItem>>;
+type GroupedItems = ReadonlyArray<ReadonlyArray<BackstageItem>>;
 /** @internal */
 export declare const useGroupedItems: (items: ReadonlyArray<BackstageItem>) => GroupedItems;
 /** Props of [[BackstageComposer]] component.
@@ -26,4 +25,5 @@ export interface BackstageComposerProps extends CommonProps {
  * @public
  */
 export declare function BackstageComposer(props: BackstageComposerProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=BackstageComposer.d.ts.map

package/lib/appui-react/backstage/BackstageComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BackstageComposer.d.ts","sourceRoot":"","sources":["../../../src/appui-react/backstage/BackstageComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqExD,gBAAgB;AAChB,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvE,gBAAgB;AAChB,eAAO,MAAM,eAAe,UACnB,aAAa,CAAC,aAAa,CAAC,KAClC,YAyBF,CAAC;AAEF;;;GAGG;AAEH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,gGAAgG;IAChG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,mHAAmH;IACnH,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,wFAAwF;IACxF,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;GAEG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAoE9D"}
+{"version":3,"file":"BackstageComposer.d.ts","sourceRoot":"","sources":["../../../src/appui-react/backstage/BackstageComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqExD,KAAK,YAAY,GAAG,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEhE,gBAAgB;AAChB,eAAO,MAAM,eAAe,UACnB,aAAa,CAAC,aAAa,CAAC,KAClC,YAyBF,CAAC;AAEF;;;GAGG;AAEH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,gGAAgG;IAChG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,mHAAmH;IACnH,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,wFAAwF;IACxF,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;GAEG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAsF9D"}

package/lib/appui-react/backstage/BackstageComposer.js

@@ -5,13 +5,10 @@
 /** @packageDocumentation
  * @module Backstage
  */
-import { ConditionalBooleanValue } from "@itwin/appui-abstract";
 import * as React from "react";
-import { Backstage as NZ_Backstage } from "../layout/backstage/Backstage.js";
-import { BackstageSeparator } from "../layout/backstage/Separator.js";
-import { SafeAreaContext } from "../safearea/SafeAreaContext.js";
+import { ConditionalBooleanValue } from "@itwin/appui-abstract";
 import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher.js";
-import { BackstageComposerItem } from "./BackstageComposerItem.js";
+import { Backstage, BackstageActionItem, BackstageGroup, BackstageStageLauncher, } from "./Backstage.js";
 import { isBackstageStageLauncher } from "./BackstageItem.js";
 import { BackstageItemsManager } from "./BackstageItemsManager.js";
 import { useBackstageManager, useIsBackstageOpen } from "./BackstageManager.js";
@@ -90,17 +87,17 @@ export const useGroupedItems = (items) => {
  */
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 export function BackstageComposer(props) {
-    const [defaultItemsManager, setDefaultItemsManager] = React.useState(new BackstageItemsManager(props.items));
-    const initialItems = React.useRef(props.items);
+    const { header, showOverlay = true, items, hideSoloStageEntry, itemId, ...rest } = props;
+    const [defaultItemsManager, setDefaultItemsManager] = React.useState(new BackstageItemsManager(items));
+    const initialItems = React.useRef(items);
     React.useEffect(() => {
-        if (initialItems.current !== props.items) {
-            initialItems.current = props.items;
-            setDefaultItemsManager(new BackstageItemsManager(props.items));
+        if (initialItems.current !== items) {
+            initialItems.current = items;
+            setDefaultItemsManager(new BackstageItemsManager(items));
         }
-    }, [props.items]);
+    }, [items]);
     const manager = useBackstageManager();
     const isOpen = useIsBackstageOpen(manager);
-    const safeAreaInsets = React.useContext(SafeAreaContext);
     const handleClose = React.useCallback(() => {
         manager.close();
     }, [manager]);
@@ -112,13 +109,22 @@ export function BackstageComposer(props) {
     const addonItems = useUiItemsProviderBackstageItems(addonItemsManager);
     const addonSyncIdsOfInterest = React.useMemo(() => BackstageItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
     useBackstageItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);
-    const combinedBackstageItems = React.useMemo(() => combineItems(defaultItems, addonItems, !!props.hideSoloStageEntry), [defaultItems, addonItems, props.hideSoloStageEntry]);
+    const combinedBackstageItems = React.useMemo(() => combineItems(defaultItems, addonItems, !!hideSoloStageEntry), [defaultItems, addonItems, hideSoloStageEntry]);
     const groups = useGroupedItems(combinedBackstageItems);
-    return (React.createElement(NZ_Backstage, { className: props.className, header: props.header, isOpen: isOpen, onClose: handleClose, safeAreaInsets: safeAreaInsets, showOverlay: props.showOverlay, style: props.style }, groups.map((group, groupIndex) => group.map((item, itemIndex) => {
-        const composerItem = (React.createElement(BackstageComposerItem, { item: item, key: item.id }));
-        return itemIndex === 0 && groupIndex > 0 ? (React.createElement(React.Fragment, { key: groupIndex },
-            React.createElement(BackstageSeparator, null),
-            composerItem)) : (composerItem);
-    }))));
+    return (React.createElement(Backstage, { isOpen: isOpen, onClose: handleClose, showOverlay: showOverlay, ...rest },
+        header,
+        groups.map((groupItems, groupIndex) => {
+            return (React.createElement(BackstageGroup, { key: groupIndex, index: groupIndex }, groupItems.map((item, itemIndex) => {
+                const autoFocus = groupIndex === 0 && itemIndex === 0;
+                if (isBackstageStageLauncher(item)) {
+                    return (React.createElement(BackstageStageLauncher, { key: item.id, item: item, 
+                        // eslint-disable-next-line jsx-a11y/no-autofocus -- autoFocus first item in the dialog
+                        autoFocus: autoFocus }));
+                }
+                return (React.createElement(BackstageActionItem, { key: item.id, item: item, 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus -- autoFocus first item in the dialog
+                    autoFocus: autoFocus }));
+            })));
+        })));
 }
 //# sourceMappingURL=BackstageComposer.js.map

package/lib/appui-react/backstage/BackstageComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackstageComposer.js","sourceRoot":"","sources":["../../../src/appui-react/backstage/BackstageComposer.tsx"],"names":[],"mappings":"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","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 Backstage\n */\n\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\nimport * as React from \"react\";\nimport { Backstage as NZ_Backstage } from \"../layout/backstage/Backstage.js\";\nimport { BackstageSeparator } from \"../layout/backstage/Separator.js\";\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext.js\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher.js\";\nimport { BackstageComposerItem } from \"./BackstageComposerItem.js\";\nimport { isBackstageStageLauncher } from \"./BackstageItem.js\";\nimport { BackstageItemsManager } from \"./BackstageItemsManager.js\";\nimport { useBackstageManager, useIsBackstageOpen } from \"./BackstageManager.js\";\nimport { useDefaultBackstageItems } from \"./useDefaultBackstageItems.js\";\nimport { useUiItemsProviderBackstageItems } from \"./useUiItemsProviderBackstageItems.js\";\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { BackstageItem } from \"./BackstageItem.js\";\n\n/** Private function to set up sync event monitoring of backstage items */\nfunction useBackstageItemSyncEffect(\n  itemsManager: BackstageItemsManager,\n  syncIdsOfInterest: string[]\n) {\n  const isInitialMount = React.useRef(true);\n\n  React.useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      // initialize the display state of any items with syncIds/condition defined\n      itemsManager.refreshAffectedItems(new Set(syncIdsOfInterest));\n    }\n\n    return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {\n      if (0 === syncIdsOfInterest.length) return;\n\n      if (\n        syncIdsOfInterest.some((value: string): boolean =>\n          args.eventIds.has(value.toLowerCase())\n        )\n      ) {\n        // process each item that has interest\n        itemsManager.refreshAffectedItems(args.eventIds);\n      }\n    });\n  }, [itemsManager, itemsManager.items, syncIdsOfInterest]);\n}\n\n/** local function to combine items from Stage and from Extensions */\nfunction combineItems(\n  stageItems: ReadonlyArray<BackstageItem>,\n  addonItems: ReadonlyArray<BackstageItem>,\n  hideSoloStageEntry: boolean\n): ReadonlyArray<BackstageItem> {\n  let items: Array<BackstageItem> = [];\n  if (stageItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    stageItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n  if (addonItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    addonItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n\n  if (hideSoloStageEntry) {\n    // per user request don't show stage launcher if only one stage is available\n    const numberOfFrontstageItems = items.reduce(\n      (accumulator, item) =>\n        accumulator + (isBackstageStageLauncher(item) ? 1 : 0),\n      0\n    );\n    if (1 === numberOfFrontstageItems)\n      items = items.filter((item) => !isBackstageStageLauncher(item));\n  }\n\n  return items;\n}\n\n/** @internal */\nexport type GroupedItems = ReadonlyArray<ReadonlyArray<BackstageItem>>;\n\n/** @internal */\nexport const useGroupedItems = (\n  items: ReadonlyArray<BackstageItem>\n): GroupedItems => {\n  return React.useMemo(() => {\n    const grouped = items.reduce<GroupedItems>((acc, item) => {\n      if (ConditionalBooleanValue.getValue(item.isHidden)) return acc;\n      const groupIndex = acc.findIndex(\n        (group) => group[0].groupPriority === item.groupPriority\n      );\n      if (groupIndex >= 0)\n        return [\n          ...acc.slice(0, groupIndex),\n          [...acc[groupIndex], item],\n          ...acc.slice(groupIndex + 1),\n        ];\n      return [...acc, [item]];\n    }, []);\n    const sortedGroups = grouped.reduce<GroupedItems>((acc, group) => {\n      const sortedGroup = [...group].sort(\n        (a, b) => a.itemPriority - b.itemPriority\n      );\n      return [...acc, sortedGroup];\n    }, []);\n    return [...sortedGroups].sort(\n      (a, b) => a[0].groupPriority - b[0].groupPriority\n    );\n  }, [items]);\n};\n\n/** Props of [[BackstageComposer]] component.\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof BackstageComposer>`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface BackstageComposerProps extends CommonProps {\n  /** React node for an optional header item */\n  readonly header?: React.ReactNode;\n  /** Indicates whether to place an overlay over the frontstage when the backstage is displayed */\n  readonly showOverlay?: boolean;\n  /** List of static backstage items to show. Can be undefined in UiItemsProviders are used to populate backstage. */\n  readonly items?: BackstageItem[];\n  /** If true and only one stage launcher item is found, do not show entry in backstage */\n  readonly hideSoloStageEntry?: boolean;\n}\n\n/** Backstage component composed from [[UiFramework.backstage]] items.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function BackstageComposer(props: BackstageComposerProps) {\n  const [defaultItemsManager, setDefaultItemsManager] = React.useState(\n    new BackstageItemsManager(props.items)\n  );\n  const initialItems = React.useRef(props.items);\n\n  React.useEffect(() => {\n    if (initialItems.current !== props.items) {\n      initialItems.current = props.items;\n      setDefaultItemsManager(new BackstageItemsManager(props.items));\n    }\n  }, [props.items]);\n\n  const manager = useBackstageManager();\n  const isOpen = useIsBackstageOpen(manager);\n  const safeAreaInsets = React.useContext(SafeAreaContext);\n  const handleClose = React.useCallback(() => {\n    manager.close();\n  }, [manager]);\n\n  const defaultItems = useDefaultBackstageItems(defaultItemsManager);\n  const syncIdsOfInterest = React.useMemo(\n    () => BackstageItemsManager.getSyncIdsOfInterest(defaultItems),\n    [defaultItems]\n  );\n  useBackstageItemSyncEffect(defaultItemsManager, syncIdsOfInterest);\n\n  const [addonItemsManager] = React.useState(new BackstageItemsManager());\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const addonItems = useUiItemsProviderBackstageItems(addonItemsManager);\n  const addonSyncIdsOfInterest = React.useMemo(\n    () => BackstageItemsManager.getSyncIdsOfInterest(addonItems),\n    [addonItems]\n  );\n  useBackstageItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);\n\n  const combinedBackstageItems = React.useMemo(\n    () => combineItems(defaultItems, addonItems, !!props.hideSoloStageEntry),\n    [defaultItems, addonItems, props.hideSoloStageEntry]\n  );\n  const groups = useGroupedItems(combinedBackstageItems);\n  return (\n    <NZ_Backstage\n      className={props.className}\n      header={props.header}\n      isOpen={isOpen}\n      onClose={handleClose}\n      safeAreaInsets={safeAreaInsets}\n      showOverlay={props.showOverlay}\n      style={props.style}\n    >\n      {groups.map((group, groupIndex) =>\n        group.map((item, itemIndex) => {\n          const composerItem = (\n            <BackstageComposerItem item={item} key={item.id} />\n          );\n          return itemIndex === 0 && groupIndex > 0 ? (\n            <React.Fragment key={groupIndex}>\n              <BackstageSeparator />\n              {composerItem}\n            </React.Fragment>\n          ) : (\n            composerItem\n          );\n        })\n      )}\n    </NZ_Backstage>\n  );\n}\n"]}
+{"version":3,"file":"BackstageComposer.js","sourceRoot":"","sources":["../../../src/appui-react/backstage/BackstageComposer.tsx"],"names":[],"mappings":"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","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 Backstage\n */\n\nimport * as React from \"react\";\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher.js\";\nimport {\n  Backstage,\n  BackstageActionItem,\n  BackstageGroup,\n  BackstageStageLauncher,\n} from \"./Backstage.js\";\nimport { isBackstageStageLauncher } from \"./BackstageItem.js\";\nimport { BackstageItemsManager } from \"./BackstageItemsManager.js\";\nimport { useBackstageManager, useIsBackstageOpen } from \"./BackstageManager.js\";\nimport { useDefaultBackstageItems } from \"./useDefaultBackstageItems.js\";\nimport { useUiItemsProviderBackstageItems } from \"./useUiItemsProviderBackstageItems.js\";\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { BackstageItem } from \"./BackstageItem.js\";\n\n/** Private function to set up sync event monitoring of backstage items */\nfunction useBackstageItemSyncEffect(\n  itemsManager: BackstageItemsManager,\n  syncIdsOfInterest: string[]\n) {\n  const isInitialMount = React.useRef(true);\n\n  React.useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      // initialize the display state of any items with syncIds/condition defined\n      itemsManager.refreshAffectedItems(new Set(syncIdsOfInterest));\n    }\n\n    return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {\n      if (0 === syncIdsOfInterest.length) return;\n\n      if (\n        syncIdsOfInterest.some((value: string): boolean =>\n          args.eventIds.has(value.toLowerCase())\n        )\n      ) {\n        // process each item that has interest\n        itemsManager.refreshAffectedItems(args.eventIds);\n      }\n    });\n  }, [itemsManager, itemsManager.items, syncIdsOfInterest]);\n}\n\n/** local function to combine items from Stage and from Extensions */\nfunction combineItems(\n  stageItems: ReadonlyArray<BackstageItem>,\n  addonItems: ReadonlyArray<BackstageItem>,\n  hideSoloStageEntry: boolean\n): ReadonlyArray<BackstageItem> {\n  let items: Array<BackstageItem> = [];\n  if (stageItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    stageItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n  if (addonItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    addonItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n\n  if (hideSoloStageEntry) {\n    // per user request don't show stage launcher if only one stage is available\n    const numberOfFrontstageItems = items.reduce(\n      (accumulator, item) =>\n        accumulator + (isBackstageStageLauncher(item) ? 1 : 0),\n      0\n    );\n    if (1 === numberOfFrontstageItems)\n      items = items.filter((item) => !isBackstageStageLauncher(item));\n  }\n\n  return items;\n}\n\ntype GroupedItems = ReadonlyArray<ReadonlyArray<BackstageItem>>;\n\n/** @internal */\nexport const useGroupedItems = (\n  items: ReadonlyArray<BackstageItem>\n): GroupedItems => {\n  return React.useMemo(() => {\n    const grouped = items.reduce<GroupedItems>((acc, item) => {\n      if (ConditionalBooleanValue.getValue(item.isHidden)) return acc;\n      const groupIndex = acc.findIndex(\n        (group) => group[0].groupPriority === item.groupPriority\n      );\n      if (groupIndex >= 0)\n        return [\n          ...acc.slice(0, groupIndex),\n          [...acc[groupIndex], item],\n          ...acc.slice(groupIndex + 1),\n        ];\n      return [...acc, [item]];\n    }, []);\n    const sortedGroups = grouped.reduce<GroupedItems>((acc, group) => {\n      const sortedGroup = [...group].sort(\n        (a, b) => a.itemPriority - b.itemPriority\n      );\n      return [...acc, sortedGroup];\n    }, []);\n    return [...sortedGroups].sort(\n      (a, b) => a[0].groupPriority - b[0].groupPriority\n    );\n  }, [items]);\n};\n\n/** Props of [[BackstageComposer]] component.\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof BackstageComposer>`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface BackstageComposerProps extends CommonProps {\n  /** React node for an optional header item */\n  readonly header?: React.ReactNode;\n  /** Indicates whether to place an overlay over the frontstage when the backstage is displayed */\n  readonly showOverlay?: boolean;\n  /** List of static backstage items to show. Can be undefined in UiItemsProviders are used to populate backstage. */\n  readonly items?: BackstageItem[];\n  /** If true and only one stage launcher item is found, do not show entry in backstage */\n  readonly hideSoloStageEntry?: boolean;\n}\n\n/** Backstage component composed from [[UiFramework.backstage]] items.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function BackstageComposer(props: BackstageComposerProps) {\n  const {\n    header,\n    showOverlay = true,\n    items,\n    hideSoloStageEntry,\n    itemId,\n    ...rest\n  } = props;\n\n  const [defaultItemsManager, setDefaultItemsManager] = React.useState(\n    new BackstageItemsManager(items)\n  );\n  const initialItems = React.useRef(items);\n\n  React.useEffect(() => {\n    if (initialItems.current !== items) {\n      initialItems.current = items;\n      setDefaultItemsManager(new BackstageItemsManager(items));\n    }\n  }, [items]);\n\n  const manager = useBackstageManager();\n  const isOpen = useIsBackstageOpen(manager);\n  const handleClose = React.useCallback(() => {\n    manager.close();\n  }, [manager]);\n\n  const defaultItems = useDefaultBackstageItems(defaultItemsManager);\n  const syncIdsOfInterest = React.useMemo(\n    () => BackstageItemsManager.getSyncIdsOfInterest(defaultItems),\n    [defaultItems]\n  );\n  useBackstageItemSyncEffect(defaultItemsManager, syncIdsOfInterest);\n\n  const [addonItemsManager] = React.useState(new BackstageItemsManager());\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const addonItems = useUiItemsProviderBackstageItems(addonItemsManager);\n  const addonSyncIdsOfInterest = React.useMemo(\n    () => BackstageItemsManager.getSyncIdsOfInterest(addonItems),\n    [addonItems]\n  );\n  useBackstageItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);\n\n  const combinedBackstageItems = React.useMemo(\n    () => combineItems(defaultItems, addonItems, !!hideSoloStageEntry),\n    [defaultItems, addonItems, hideSoloStageEntry]\n  );\n  const groups = useGroupedItems(combinedBackstageItems);\n  return (\n    <Backstage\n      isOpen={isOpen}\n      onClose={handleClose}\n      showOverlay={showOverlay}\n      {...rest}\n    >\n      {header}\n      {groups.map((groupItems, groupIndex) => {\n        return (\n          <BackstageGroup key={groupIndex} index={groupIndex}>\n            {groupItems.map((item, itemIndex) => {\n              const autoFocus = groupIndex === 0 && itemIndex === 0;\n              if (isBackstageStageLauncher(item)) {\n                return (\n                  <BackstageStageLauncher\n                    key={item.id}\n                    item={item}\n                    // eslint-disable-next-line jsx-a11y/no-autofocus -- autoFocus first item in the dialog\n                    autoFocus={autoFocus}\n                  />\n                );\n              }\n              return (\n                <BackstageActionItem\n                  key={item.id}\n                  item={item}\n                  // eslint-disable-next-line jsx-a11y/no-autofocus -- autoFocus first item in the dialog\n                  autoFocus={autoFocus}\n                />\n              );\n            })}\n          </BackstageGroup>\n        );\n      })}\n    </Backstage>\n  );\n}\n"]}

package/lib/appui-react/configurableui/ConfigurableUiContent.d.ts

@@ -6,6 +6,7 @@ import * as React from "react";
 import type { CommonProps } from "@itwin/core-react";
 import type { StagePanelSection } from "../stagepanels/StagePanelSection.js";
 import type { StagePanelLocation } from "../stagepanels/StagePanelLocation.js";
+import type { ModalFrontstageInfo } from "../framework/FrameworkFrontstages.js";
 /** @internal */
 export declare const ConfigurableUiContext: React.Context<ConfigurableUiContentProps & {
     contentElementRef?: React.RefObject<HTMLElement | null>;
@@ -40,6 +41,17 @@ export interface ConfigurableUiContentProps extends CommonProps {
     toolbarOpacity?: number;
     /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */
     childWindow?: React.ComponentType;
+    /**
+     * Overrides the default modal frontstage.
+     * Use the {@link ModalFrontstage} component to customize the default layout and behavior.
+     * @alpha
+     */
+    renderModalFrontstage?: (args: {
+        /** Information about the modal frontstage to be rendered. */
+        info: ModalFrontstageInfo;
+        /** Might be used for open/close animations in the future. */
+        isOpen: boolean;
+    }) => React.ReactNode;
     /** @internal */
     idleTimeout?: number;
     /** @internal */

package/lib/appui-react/configurableui/ConfigurableUiContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableUiContent.d.ts","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgCrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO/E,gBAAgB;AAChB,eAAO,MAAM,qBAAqB;wBAGV,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;oBACvC,mBAAmB,CAAC,eAAe,CAAC;mBACrC,mBAAmB,CAAC,cAAc,CAAC;EAEjD,CAAC;AAEN;;;GAGG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oHAAoH;IACpH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4GAA4G;IAC5G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,8HAA8H;IAC9H,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sIAAsI;IACtI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sHAAsH;IACtH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gHAAgH;IAChH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAElC,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,4BAAkD,CAAC;AAE9E;;GAEG;AAEH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAatE;AAED,UAAU,oBAAoB;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE;QACb;;;;WAIG;QACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;KACxC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA0FxD"}
+{"version":3,"file":"ConfigurableUiContent.d.ts","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgCrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAGhF,gBAAgB;AAChB,eAAO,MAAM,qBAAqB;wBAGV,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;oBACvC,mBAAmB,CAAC,eAAe,CAAC;mBACrC,mBAAmB,CAAC,cAAc,CAAC;EAEjD,CAAC;AAEN;;;GAGG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oHAAoH;IACpH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4GAA4G;IAC5G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,8HAA8H;IAC9H,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sIAAsI;IACtI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sHAAsH;IACtH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gHAAgH;IAChH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,6DAA6D;QAC7D,IAAI,EAAE,mBAAmB,CAAC;QAC1B,6DAA6D;QAC7D,MAAM,EAAE,OAAO,CAAC;KACjB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,4BAAkD,CAAC;AAE9E;;GAEG;AAEH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAatE;AAED,UAAU,oBAAoB;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE;QACb;;;;WAIG;QACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;KACxC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA0FxD"}

package/lib/appui-react/configurableui/ConfigurableUiContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableUiContent.js","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"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","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 ConfigurableUi\n */\n\nimport \"./ConfigurableUiContent.scss\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport {\n  IModelConnectionProvider,\n  QuantityEditorSpec,\n  WeightEditorSpec,\n} from \"@itwin/imodel-components-react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { CursorInformation } from \"../cursor/CursorInformation.js\";\nimport { CursorPopupMenu } from \"../cursor/cursormenu/CursorMenu.js\";\nimport { CursorPopupRenderer } from \"../cursor/cursorpopup/CursorPopupManager.js\";\nimport { ModalDialogRenderer } from \"../dialog/ModalDialogManager.js\";\nimport { ModelessDialogRenderer } from \"../dialog/ModelessDialogManager.js\";\nimport { ElementTooltip } from \"../feedback/ElementTooltip.js\";\nimport { KeyboardShortcutMenu } from \"../keyboardshortcut/KeyboardShortcutMenu.js\";\nimport { InputFieldMessage } from \"../messages/InputField.js\";\nimport { PointerMessage } from \"../messages/Pointer.js\";\nimport { PopupRenderer } from \"../popup/PopupManager.js\";\nimport { WidgetPanelsFrontstage } from \"../widget-panels/Frontstage.js\";\nimport { ContentDialogRenderer } from \"../dialog/ContentDialogManager.js\";\nimport { appUi, UiFramework } from \"../UiFramework.js\";\nimport { InternalConfigurableUiManager } from \"./InternalConfigurableUiManager.js\";\nimport { MessageRenderer } from \"../messages/MessageRenderer.js\";\nimport {\n  TOOLBAR_OPACITY_DEFAULT,\n  WIDGET_OPACITY_DEFAULT,\n} from \"../theme/ThemeId.js\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState.js\";\nimport type { ContentProps } from \"../content/ContentGroup.js\";\nimport { ChildWindowRenderer } from \"../childwindow/ChildWindowRenderer.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport type { WidgetActions } from \"../layout/widget/WidgetActions.js\";\nimport type { StagePanelSection } from \"../stagepanels/StagePanelSection.js\";\nimport type { StagePanelLocation } from \"../stagepanels/StagePanelLocation.js\";\nimport type { Widget } from \"../widgets/Widget.js\";\nimport type { WidgetState } from \"../widgets/WidgetState.js\";\nimport { useActiveIModelConnection } from \"../hooks/useActiveIModelConnection.js\";\nimport { EditorsRegistryProvider } from \"@itwin/components-react\";\nimport { AccuDrawStoreProvider } from \"../accudraw/AccuDrawStoreProvider.js\";\n\n/** @internal */\nexport const ConfigurableUiContext = React.createContext<\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  ConfigurableUiContentProps & {\n    contentElementRef?: React.RefObject<HTMLElement | null>;\n    widgetActions?: StandardLayoutProps[\"widgetActions\"];\n    toolSettings?: StandardLayoutProps[\"toolSettings\"];\n  }\n>({});\n\n/** Properties for [[ConfigurableUiContent]]\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ConfigurableUiContent>`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ConfigurableUiContentProps extends CommonProps {\n  /** React node of the Backstage */\n  appBackstage?: React.ReactNode;\n  /** Controls if the view overlay should be displayed. Uses redux store as a fallback. Defaults to `true`.\n   * @note Only used by configurable control APIs. See {@link ContentProps.classId}.\n   * @deprecated in 4.16.0. View overlay visibility should be controlled by the components used in {@link ContentProps.content}.\n   */\n  viewOverlay?: boolean;\n  /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. */\n  widgetOpacity?: number;\n  /** Controls if the widget icons should be displayed. Uses redux store as a fallback. Defaults to `true`. */\n  widgetIcon?: boolean;\n  /** Controls if the active widget's label should always be displayed. Defaults to `false`. */\n  showActiveWidgetLabel?: boolean;\n  /** Controls if the unpinned panels should be collapsed automatically. Uses redux store as a fallback. Defaults to `false`. */\n  collapsePanels?: boolean;\n  /** Controls if the tool settings should be animated. Uses redux store as a fallback. Defaults to `false`. */\n  animateToolSettings?: boolean;\n  /** Controls if the tool settings label should be set based on activated tool. Uses redux store as a fallback. Defaults to `false`. */\n  toolAsToolSettingsLabel?: boolean;\n  /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. */\n  toolbarOpacity?: number;\n  /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */\n  childWindow?: React.ComponentType;\n\n  /** @internal */\n  idleTimeout?: number;\n  /** @internal */\n  intervalTimeout?: number;\n}\n\n/**\n * Allows children to get the bounds or other properties of the wrapper element.\n * @internal\n */\nexport const WrapperContext = React.createContext<HTMLElement>(document.body);\n\n/** The main component of `AppUI` that sets up the configurable UI.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function ConfigurableUiContent(props: ConfigurableUiContentProps) {\n  const frontstageDef = useActiveFrontstageDef();\n  const layout = frontstageDef?.initialConfig?.layout;\n  return (\n    <ConfigurableUiContext.Provider\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      value={React.useMemo(() => props, [...Object.values(props)])}\n    >\n      <AccuDrawStoreProvider>\n        {layout ?? <StandardLayout />}\n      </AccuDrawStoreProvider>\n    </ConfigurableUiContext.Provider>\n  );\n}\n\ninterface ToolSettingsLocation {\n  section: StagePanelSection;\n  location: StagePanelLocation;\n}\n\ninterface StandardLayoutProps {\n  /** Overrides widget specific actions displayed in the title bar area.\n   * Use {@link WidgetActions} component to customize widget actions.\n   * @alpha\n   */\n  widgetActions?: React.ReactNode;\n  /** When enabled keeps the tool settings visible to the end user.\n   * This is especially useful when the tool settings is undocked as a regular widget.\n   * @alpha\n   */\n  visibleToolSettings?: boolean;\n  /** Tool settings related configuration.\n   * @alpha\n   */\n  toolSettings?: {\n    /** The default location of the tool settings. Only used when initializing the layout and ignored when restoring a saved layout.\n     * When this is specified, the tool settings will be initialized as a widget, instead of the default docked state.\n     * @note Use {@link Widget} for further configuration. I.e. set {@link Widget.defaultState} to {@link WidgetState.Floating} to initialize the tool settings as a floating widget.\n     * @alpha\n     */\n    defaultLocation?: ToolSettingsLocation;\n  };\n}\n\n/** The standard widget based layout used as a default layout for all frontstages.\n * @alpha\n */\nexport function StandardLayout(props: StandardLayoutProps) {\n  const { widgetActions, visibleToolSettings = false, toolSettings } = props;\n  const context = React.useContext(ConfigurableUiContext);\n  const {\n    appBackstage,\n    widgetOpacity,\n    toolbarOpacity,\n    idleTimeout,\n    intervalTimeout,\n  } = context;\n\n  const contentElementRef = React.useRef<HTMLElement>(null);\n  useWidgetOpacity(widgetOpacity);\n  useToolbarOpacity(toolbarOpacity);\n  const [mainElement, setMainElement] = React.useState<HTMLElement>();\n  const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();\n  React.useEffect(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  React.useEffect(() => {\n    InternalConfigurableUiManager.activityTracker.initialize({\n      idleTimeout,\n      intervalTimeout,\n    });\n    return () => {\n      InternalConfigurableUiManager.activityTracker.terminate();\n    };\n  }, [idleTimeout, intervalTimeout]);\n  useVisibleToolSettings(visibleToolSettings);\n\n  return (\n    <ConfigurableUiContext.Provider\n      value={React.useMemo(\n        () => ({\n          ...context,\n          contentElementRef,\n          widgetActions,\n          toolSettings,\n        }),\n        [context, widgetActions, toolSettings]\n      )}\n    >\n      <main\n        role=\"main\"\n        id=\"uifw-configurableui-wrapper\"\n        className={context.className}\n        style={context.style}\n        onMouseMove={(e) => {\n          const point = new Point(e.pageX, e.pageY);\n          CursorInformation.handleMouseMove(point, e.view.document);\n        }}\n        ref={(el) => setMainElement(el ?? undefined)}\n      >\n        <WrapperContext.Provider value={mainElement ?? document.body}>\n          <ThemeProvider\n            style={{ height: \"100%\" }}\n            portalContainer={portalContainer}\n          >\n            <IModelProvider>\n              <EditorsRegistryProvider editors={defaultEditors}>\n                {appBackstage}\n                <WidgetPanelsFrontstage />\n\n                <PointerMessage />\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <KeyboardShortcutMenu />\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <InputFieldMessage />\n                <CursorPopupMenu />\n                <CursorPopupRenderer />\n                <PopupRenderer />\n                <ElementTooltip />\n                <MessageRenderer />\n                <ChildWindowRenderer windowManager={appUi.windowManager} />\n                <div\n                  className=\"uifw-configurableui-portalContainer\"\n                  ref={(instance) => setPortalContainer(instance ?? undefined)}\n                >\n                  <ContentDialogRenderer />\n                  <ModelessDialogRenderer />\n                  <ModalDialogRenderer />\n                </div>\n              </EditorsRegistryProvider>\n            </IModelProvider>\n          </ThemeProvider>\n        </WrapperContext.Provider>\n      </main>\n    </ConfigurableUiContext.Provider>\n  );\n}\n\nconst defaultEditors = [QuantityEditorSpec, WeightEditorSpec];\n\nfunction useWidgetOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  widgetOpacity: ConfigurableUiContentProps[\"widgetOpacity\"]\n) {\n  const reduxWidgetOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.widgetOpacity;\n  });\n  const opacity = widgetOpacity ?? reduxWidgetOpacity ?? WIDGET_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentWidgetOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-widget-opacity\");\n    if (currentWidgetOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-widget-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-widget-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useToolbarOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  toolbarOpacity: ConfigurableUiContentProps[\"toolbarOpacity\"]\n) {\n  const reduxToolbarOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.toolbarOpacity;\n  });\n\n  const opacity =\n    toolbarOpacity ?? reduxToolbarOpacity ?? TOOLBAR_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentToolbarOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\");\n    if (currentToolbarOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-toolbar-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-toolbar-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useVisibleToolSettings(enabled: boolean) {\n  React.useEffect(() => {\n    if (!enabled) return;\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const frontstage = UiFramework.frontstages.activeFrontstageDef;\n      const toolSettings = frontstage?.toolSettings;\n      if (!toolSettings) return;\n      toolSettings.show();\n    });\n  }, [enabled]);\n}\n\nfunction IModelProvider({ children }: React.PropsWithChildren<object>) {\n  const imodel = useActiveIModelConnection();\n\n  return (\n    <IModelConnectionProvider iModelConnection={imodel}>\n      {children}\n    </IModelConnectionProvider>\n  );\n}\n"]}
+{"version":3,"file":"ConfigurableUiContent.js","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"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","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 ConfigurableUi\n */\n\nimport \"./ConfigurableUiContent.scss\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport {\n  IModelConnectionProvider,\n  QuantityEditorSpec,\n  WeightEditorSpec,\n} from \"@itwin/imodel-components-react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { CursorInformation } from \"../cursor/CursorInformation.js\";\nimport { CursorPopupMenu } from \"../cursor/cursormenu/CursorMenu.js\";\nimport { CursorPopupRenderer } from \"../cursor/cursorpopup/CursorPopupManager.js\";\nimport { ModalDialogRenderer } from \"../dialog/ModalDialogManager.js\";\nimport { ModelessDialogRenderer } from \"../dialog/ModelessDialogManager.js\";\nimport { ElementTooltip } from \"../feedback/ElementTooltip.js\";\nimport { KeyboardShortcutMenu } from \"../keyboardshortcut/KeyboardShortcutMenu.js\";\nimport { InputFieldMessage } from \"../messages/InputField.js\";\nimport { PointerMessage } from \"../messages/Pointer.js\";\nimport { PopupRenderer } from \"../popup/PopupManager.js\";\nimport { WidgetPanelsFrontstage } from \"../widget-panels/Frontstage.js\";\nimport { ContentDialogRenderer } from \"../dialog/ContentDialogManager.js\";\nimport { appUi, UiFramework } from \"../UiFramework.js\";\nimport { InternalConfigurableUiManager } from \"./InternalConfigurableUiManager.js\";\nimport { MessageRenderer } from \"../messages/MessageRenderer.js\";\nimport {\n  TOOLBAR_OPACITY_DEFAULT,\n  WIDGET_OPACITY_DEFAULT,\n} from \"../theme/ThemeId.js\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState.js\";\nimport type { ContentProps } from \"../content/ContentGroup.js\";\nimport { ChildWindowRenderer } from \"../childwindow/ChildWindowRenderer.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport type { WidgetActions } from \"../layout/widget/WidgetActions.js\";\nimport type { StagePanelSection } from \"../stagepanels/StagePanelSection.js\";\nimport type { StagePanelLocation } from \"../stagepanels/StagePanelLocation.js\";\nimport type { Widget } from \"../widgets/Widget.js\";\nimport type { WidgetState } from \"../widgets/WidgetState.js\";\nimport { useActiveIModelConnection } from \"../hooks/useActiveIModelConnection.js\";\nimport { EditorsRegistryProvider } from \"@itwin/components-react\";\nimport { AccuDrawStoreProvider } from \"../accudraw/AccuDrawStoreProvider.js\";\nimport type { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages.js\";\nimport type { ModalFrontstage } from \"../frontstage/ModalFrontstage.js\";\n\n/** @internal */\nexport const ConfigurableUiContext = React.createContext<\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  ConfigurableUiContentProps & {\n    contentElementRef?: React.RefObject<HTMLElement | null>;\n    widgetActions?: StandardLayoutProps[\"widgetActions\"];\n    toolSettings?: StandardLayoutProps[\"toolSettings\"];\n  }\n>({});\n\n/** Properties for [[ConfigurableUiContent]]\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ConfigurableUiContent>`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ConfigurableUiContentProps extends CommonProps {\n  /** React node of the Backstage */\n  appBackstage?: React.ReactNode;\n  /** Controls if the view overlay should be displayed. Uses redux store as a fallback. Defaults to `true`.\n   * @note Only used by configurable control APIs. See {@link ContentProps.classId}.\n   * @deprecated in 4.16.0. View overlay visibility should be controlled by the components used in {@link ContentProps.content}.\n   */\n  viewOverlay?: boolean;\n  /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. */\n  widgetOpacity?: number;\n  /** Controls if the widget icons should be displayed. Uses redux store as a fallback. Defaults to `true`. */\n  widgetIcon?: boolean;\n  /** Controls if the active widget's label should always be displayed. Defaults to `false`. */\n  showActiveWidgetLabel?: boolean;\n  /** Controls if the unpinned panels should be collapsed automatically. Uses redux store as a fallback. Defaults to `false`. */\n  collapsePanels?: boolean;\n  /** Controls if the tool settings should be animated. Uses redux store as a fallback. Defaults to `false`. */\n  animateToolSettings?: boolean;\n  /** Controls if the tool settings label should be set based on activated tool. Uses redux store as a fallback. Defaults to `false`. */\n  toolAsToolSettingsLabel?: boolean;\n  /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. */\n  toolbarOpacity?: number;\n  /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */\n  childWindow?: React.ComponentType;\n  /**\n   * Overrides the default modal frontstage.\n   * Use the {@link ModalFrontstage} component to customize the default layout and behavior.\n   * @alpha\n   */\n  renderModalFrontstage?: (args: {\n    /** Information about the modal frontstage to be rendered. */\n    info: ModalFrontstageInfo;\n    /** Might be used for open/close animations in the future. */\n    isOpen: boolean;\n  }) => React.ReactNode;\n\n  /** @internal */\n  idleTimeout?: number;\n  /** @internal */\n  intervalTimeout?: number;\n}\n\n/**\n * Allows children to get the bounds or other properties of the wrapper element.\n * @internal\n */\nexport const WrapperContext = React.createContext<HTMLElement>(document.body);\n\n/** The main component of `AppUI` that sets up the configurable UI.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function ConfigurableUiContent(props: ConfigurableUiContentProps) {\n  const frontstageDef = useActiveFrontstageDef();\n  const layout = frontstageDef?.initialConfig?.layout;\n  return (\n    <ConfigurableUiContext.Provider\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      value={React.useMemo(() => props, [...Object.values(props)])}\n    >\n      <AccuDrawStoreProvider>\n        {layout ?? <StandardLayout />}\n      </AccuDrawStoreProvider>\n    </ConfigurableUiContext.Provider>\n  );\n}\n\ninterface ToolSettingsLocation {\n  section: StagePanelSection;\n  location: StagePanelLocation;\n}\n\ninterface StandardLayoutProps {\n  /** Overrides widget specific actions displayed in the title bar area.\n   * Use {@link WidgetActions} component to customize widget actions.\n   * @alpha\n   */\n  widgetActions?: React.ReactNode;\n  /** When enabled keeps the tool settings visible to the end user.\n   * This is especially useful when the tool settings is undocked as a regular widget.\n   * @alpha\n   */\n  visibleToolSettings?: boolean;\n  /** Tool settings related configuration.\n   * @alpha\n   */\n  toolSettings?: {\n    /** The default location of the tool settings. Only used when initializing the layout and ignored when restoring a saved layout.\n     * When this is specified, the tool settings will be initialized as a widget, instead of the default docked state.\n     * @note Use {@link Widget} for further configuration. I.e. set {@link Widget.defaultState} to {@link WidgetState.Floating} to initialize the tool settings as a floating widget.\n     * @alpha\n     */\n    defaultLocation?: ToolSettingsLocation;\n  };\n}\n\n/** The standard widget based layout used as a default layout for all frontstages.\n * @alpha\n */\nexport function StandardLayout(props: StandardLayoutProps) {\n  const { widgetActions, visibleToolSettings = false, toolSettings } = props;\n  const context = React.useContext(ConfigurableUiContext);\n  const {\n    appBackstage,\n    widgetOpacity,\n    toolbarOpacity,\n    idleTimeout,\n    intervalTimeout,\n  } = context;\n\n  const contentElementRef = React.useRef<HTMLElement>(null);\n  useWidgetOpacity(widgetOpacity);\n  useToolbarOpacity(toolbarOpacity);\n  const [mainElement, setMainElement] = React.useState<HTMLElement>();\n  const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();\n  React.useEffect(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  React.useEffect(() => {\n    InternalConfigurableUiManager.activityTracker.initialize({\n      idleTimeout,\n      intervalTimeout,\n    });\n    return () => {\n      InternalConfigurableUiManager.activityTracker.terminate();\n    };\n  }, [idleTimeout, intervalTimeout]);\n  useVisibleToolSettings(visibleToolSettings);\n\n  return (\n    <ConfigurableUiContext.Provider\n      value={React.useMemo(\n        () => ({\n          ...context,\n          contentElementRef,\n          widgetActions,\n          toolSettings,\n        }),\n        [context, widgetActions, toolSettings]\n      )}\n    >\n      <main\n        role=\"main\"\n        id=\"uifw-configurableui-wrapper\"\n        className={context.className}\n        style={context.style}\n        onMouseMove={(e) => {\n          const point = new Point(e.pageX, e.pageY);\n          CursorInformation.handleMouseMove(point, e.view.document);\n        }}\n        ref={(el) => setMainElement(el ?? undefined)}\n      >\n        <WrapperContext.Provider value={mainElement ?? document.body}>\n          <ThemeProvider\n            style={{ height: \"100%\" }}\n            portalContainer={portalContainer}\n          >\n            <IModelProvider>\n              <EditorsRegistryProvider editors={defaultEditors}>\n                {appBackstage}\n                <WidgetPanelsFrontstage />\n\n                <PointerMessage />\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <KeyboardShortcutMenu />\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <InputFieldMessage />\n                <CursorPopupMenu />\n                <CursorPopupRenderer />\n                <PopupRenderer />\n                <ElementTooltip />\n                <MessageRenderer />\n                <ChildWindowRenderer windowManager={appUi.windowManager} />\n                <div\n                  className=\"uifw-configurableui-portalContainer\"\n                  ref={(instance) => setPortalContainer(instance ?? undefined)}\n                >\n                  <ContentDialogRenderer />\n                  <ModelessDialogRenderer />\n                  <ModalDialogRenderer />\n                </div>\n              </EditorsRegistryProvider>\n            </IModelProvider>\n          </ThemeProvider>\n        </WrapperContext.Provider>\n      </main>\n    </ConfigurableUiContext.Provider>\n  );\n}\n\nconst defaultEditors = [QuantityEditorSpec, WeightEditorSpec];\n\nfunction useWidgetOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  widgetOpacity: ConfigurableUiContentProps[\"widgetOpacity\"]\n) {\n  const reduxWidgetOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.widgetOpacity;\n  });\n  const opacity = widgetOpacity ?? reduxWidgetOpacity ?? WIDGET_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentWidgetOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-widget-opacity\");\n    if (currentWidgetOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-widget-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-widget-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useToolbarOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  toolbarOpacity: ConfigurableUiContentProps[\"toolbarOpacity\"]\n) {\n  const reduxToolbarOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.toolbarOpacity;\n  });\n\n  const opacity =\n    toolbarOpacity ?? reduxToolbarOpacity ?? TOOLBAR_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentToolbarOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\");\n    if (currentToolbarOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-toolbar-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-toolbar-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useVisibleToolSettings(enabled: boolean) {\n  React.useEffect(() => {\n    if (!enabled) return;\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const frontstage = UiFramework.frontstages.activeFrontstageDef;\n      const toolSettings = frontstage?.toolSettings;\n      if (!toolSettings) return;\n      toolSettings.show();\n    });\n  }, [enabled]);\n}\n\nfunction IModelProvider({ children }: React.PropsWithChildren<object>) {\n  const imodel = useActiveIModelConnection();\n\n  return (\n    <IModelConnectionProvider iModelConnection={imodel}>\n      {children}\n    </IModelConnectionProvider>\n  );\n}\n"]}

package/lib/appui-react/frontstage/ModalFrontstage.d.ts

@@ -6,29 +6,41 @@ import * as React from "react";
 import type { CommonProps } from "@itwin/core-react";
 /** Properties for the [[ModalFrontstage]] React component
  * @public
+ * @deprecated in 5.31.0. Use `React.ComponentProps<typeof ModalFrontstage>` instead.
  */
 export interface ModalFrontstageProps extends CommonProps {
-    /** Title displayed at the top of the modal Frontstage */
+    /** Title displayed at the top of the modal frontstage. */
     title: string;
-    /** Indicates whether the modal Frontstage is open */
+    /** Indicates whether the modal frontstage is open. */
     isOpen?: boolean;
-    /** Callback for navigating back from the modal Frontstage. */
-    navigateBack?: () => any;
-    /** Callback for closing the modal Frontstage. */
-    closeModal: () => any;
-    /** An optional React node displayed in the upper right of the modal Frontstage. */
+    /** Callback for navigating back from the modal frontstage. */
+    navigateBack?: () => void;
+    /** Callback for closing the modal frontstage. */
+    closeModal: () => void;
+    /** Optional content displayed in the upper right of the modal frontstage. */
     appBarRight?: React.ReactNode;
-    /** If specified overrides the default back button. */
+    /** If specified overrides the default {@link ModalFrontstageButton}. */
     backButton?: React.ReactNode;
-    /** Content */
+    /** Content of the modal frontstage. */
     children?: React.ReactNode;
+    /**
+     * If `true`, hides the header of the modal frontstage and renders the `children` prop in the root element.
+     * @note When set to `true`, the `title`, `navigateBack`, `closeModal`, `appBarRight`, and `backButton` props are ignored.
+     */
+    hideHeader?: boolean;
 }
-/** ModalFrontstage React component
+interface Props extends Omit<ModalFrontstageProps, "closeModal"> {
+    /**
+     * Callback for closing the modal Frontstage.
+     * @deprecated in 5.31.0. Use `navigateBack` prop instead.
+     */
+    closeModal?: () => void;
+}
+/**
+ * The default layout used for modal frontstages.
+ * Use `renderModalFrontstage` prop of {@link ConfigurableUiContent} to override the modal frontstage layout.
  * @public
  */
-export declare class ModalFrontstage extends React.Component<ModalFrontstageProps> {
-    constructor(props: ModalFrontstageProps);
-    private _onGoBack;
-    render(): React.JSX.Element;
-}
+export declare function ModalFrontstage(props: Props): React.JSX.Element;
+export {};
 //# sourceMappingURL=ModalFrontstage.d.ts.map

package/lib/appui-react/frontstage/ModalFrontstage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFrontstage.d.ts","sourceRoot":"","sources":["../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AAEH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC;IACzB,iDAAiD;IACjD,UAAU,EAAE,MAAM,GAAG,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sDAAsD;IACtD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;gBAC5D,KAAK,EAAE,oBAAoB;IAIvC,OAAO,CAAC,SAAS,CAGf;IAEc,MAAM;CA+BvB"}
+{"version":3,"file":"ModalFrontstage.d.ts","sourceRoot":"","sources":["../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;;GAGG;AAEH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iDAAiD;IACjD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wEAAwE;IACxE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAGD,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC;IAC9D;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,qBAkD3C"}

package/lib/appui-react/frontstage/ModalFrontstage.js

@@ -10,28 +10,24 @@ import * as React from "react";
 import classnames from "classnames";
 import { Text } from "@itwin/itwinui-react";
 import { ModalFrontstageButton } from "./ModalFrontstageButton.js";
-/** ModalFrontstage React component
+/**
+ * The default layout used for modal frontstages.
+ * Use `renderModalFrontstage` prop of {@link ConfigurableUiContent} to override the modal frontstage layout.
  * @public
  */
-export class ModalFrontstage extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    _onGoBack = () => {
-        if (this.props.navigateBack)
-            this.props.navigateBack();
-        this.props.closeModal();
+export function ModalFrontstage(props) {
+    const { isOpen, navigateBack, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    closeModal, backButton, title, appBarRight, hideHeader, ...rest } = props;
+    const handleBack = () => {
+        navigateBack?.();
+        closeModal?.();
     };
-    render() {
-        const classNames = classnames("uifw-modal-frontstage", this.props.isOpen && "uifw-modal-open", this.props.className);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classNames, style: this.props.style },
-                React.createElement("div", { className: "uifw-modal-app-bar" },
-                    this.props.backButton ? (this.props.backButton) : (React.createElement(ModalFrontstageButton, { onClick: this._onGoBack })),
-                    React.createElement(Text, { variant: "headline", className: "uifw-headline" }, this.props.title),
-                    this.props.appBarRight && (React.createElement("span", { className: "uifw-modal-app-bar-right" }, this.props.appBarRight))),
-                React.createElement("div", { className: "uifw-modal-stage-content" }, this.props.children)),
-            React.createElement("div", { className: "uifw-modal-frontstage-overlay" })));
-    }
+    return (React.createElement("div", { ...rest, className: classnames("uifw-modal-frontstage", isOpen && "uifw-modal-open", hideHeader && "uifw-no-header", props.className) }, hideHeader ? (props.children) : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "uifw-modal-app-bar" },
+            backButton ? (backButton) : (React.createElement(ModalFrontstageButton, { onClick: handleBack })),
+            React.createElement(Text, { variant: "headline", className: "uifw-headline" }, title),
+            appBarRight && (React.createElement("span", { className: "uifw-modal-app-bar-right" }, appBarRight))),
+        React.createElement("div", { className: "uifw-modal-stage-content" }, props.children)))));
 }
 //# sourceMappingURL=ModalFrontstage.js.map

package/lib/appui-react/frontstage/ModalFrontstage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFrontstage.js","sourceRoot":"","sources":["../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAuBnE;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAA+B;IACxE,YAAY,KAA2B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEO,SAAS,GAAG,GAAG,EAAE;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;YAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;QACvD,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEc,MAAM;QACpB,MAAM,UAAU,GAAG,UAAU,CAC3B,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,6BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACjD,6BAAK,SAAS,EAAC,oBAAoB;oBAChC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAqB,IAAC,OAAO,EAAE,IAAI,CAAC,SAAS,GAAI,CACnD;oBACD,oBAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,eAAe,IAC/C,IAAI,CAAC,KAAK,CAAC,KAAK,CACZ;oBACN,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,CACzB,8BAAM,SAAS,EAAC,0BAA0B,IACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAClB,CACR,CACG;gBACN,6BAAK,SAAS,EAAC,0BAA0B,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACjE;YACN,6BAAK,SAAS,EAAC,+BAA+B,GAAG,CAChD,CACJ,CAAC;IACJ,CAAC;CACF","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 */\n\nimport \"./ModalFrontstage.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { ModalFrontstageButton } from \"./ModalFrontstageButton.js\";\n\n/** Properties for the [[ModalFrontstage]] React component\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ModalFrontstageProps extends CommonProps {\n  /** Title displayed at the top of the modal Frontstage */\n  title: string;\n  /** Indicates whether the modal Frontstage is open */\n  isOpen?: boolean;\n  /** Callback for navigating back from the modal Frontstage. */\n  navigateBack?: () => any;\n  /** Callback for closing the modal Frontstage. */\n  closeModal: () => any;\n  /** An optional React node displayed in the upper right of the modal Frontstage. */\n  appBarRight?: React.ReactNode;\n  /** If specified overrides the default back button. */\n  backButton?: React.ReactNode;\n  /** Content */\n  children?: React.ReactNode;\n}\n\n/** ModalFrontstage React component\n * @public\n */\nexport class ModalFrontstage extends React.Component<ModalFrontstageProps> {\n  constructor(props: ModalFrontstageProps) {\n    super(props);\n  }\n\n  private _onGoBack = () => {\n    if (this.props.navigateBack) this.props.navigateBack();\n    this.props.closeModal();\n  };\n\n  public override render() {\n    const classNames = classnames(\n      \"uifw-modal-frontstage\",\n      this.props.isOpen && \"uifw-modal-open\",\n      this.props.className\n    );\n\n    return (\n      <>\n        <div className={classNames} style={this.props.style}>\n          <div className=\"uifw-modal-app-bar\">\n            {this.props.backButton ? (\n              this.props.backButton\n            ) : (\n              <ModalFrontstageButton onClick={this._onGoBack} />\n            )}\n            <Text variant=\"headline\" className=\"uifw-headline\">\n              {this.props.title}\n            </Text>\n            {this.props.appBarRight && (\n              <span className=\"uifw-modal-app-bar-right\">\n                {this.props.appBarRight}\n              </span>\n            )}\n          </div>\n          <div className=\"uifw-modal-stage-content\">{this.props.children}</div>\n        </div>\n        <div className=\"uifw-modal-frontstage-overlay\" />\n      </>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ModalFrontstage.js","sourceRoot":"","sources":["../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAuCnE;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,KAAY;IAC1C,MAAM,EACJ,MAAM,EACN,YAAY;IACZ,4DAA4D;IAC5D,UAAU,EACV,UAAU,EACV,KAAK,EACL,WAAW,EACX,UAAU,EACV,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,YAAY,EAAE,EAAE,CAAC;QACjB,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,gCACM,IAAI,EACR,SAAS,EAAE,UAAU,CACnB,uBAAuB,EACvB,MAAM,IAAI,iBAAiB,EAC3B,UAAU,IAAI,gBAAgB,EAC9B,KAAK,CAAC,SAAS,CAChB,IAEA,UAAU,CAAC,CAAC,CAAC,CACZ,KAAK,CAAC,QAAQ,CACf,CAAC,CAAC,CAAC,CACF;QACE,6BAAK,SAAS,EAAC,oBAAoB;YAChC,UAAU,CAAC,CAAC,CAAC,CACZ,UAAU,CACX,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAqB,IAAC,OAAO,EAAE,UAAU,GAAI,CAC/C;YACD,oBAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,eAAe,IAC/C,KAAK,CACD;YACN,WAAW,IAAI,CACd,8BAAM,SAAS,EAAC,0BAA0B,IAAE,WAAW,CAAQ,CAChE,CACG;QACN,6BAAK,SAAS,EAAC,0BAA0B,IAAE,KAAK,CAAC,QAAQ,CAAO,CAC/D,CACJ,CACG,CACP,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 */\n\nimport \"./ModalFrontstage.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { ModalFrontstageButton } from \"./ModalFrontstageButton.js\";\nimport type { ConfigurableUiContent } from \"../configurableui/ConfigurableUiContent.js\";\n\n/** Properties for the [[ModalFrontstage]] React component\n * @public\n * @deprecated in 5.31.0. Use `React.ComponentProps<typeof ModalFrontstage>` instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ModalFrontstageProps extends CommonProps {\n  /** Title displayed at the top of the modal frontstage. */\n  title: string;\n  /** Indicates whether the modal frontstage is open. */\n  isOpen?: boolean;\n  /** Callback for navigating back from the modal frontstage. */\n  navigateBack?: () => void;\n  /** Callback for closing the modal frontstage. */\n  closeModal: () => void;\n  /** Optional content displayed in the upper right of the modal frontstage. */\n  appBarRight?: React.ReactNode;\n  /** If specified overrides the default {@link ModalFrontstageButton}. */\n  backButton?: React.ReactNode;\n  /** Content of the modal frontstage. */\n  children?: React.ReactNode;\n  /**\n   * If `true`, hides the header of the modal frontstage and renders the `children` prop in the root element.\n   * @note When set to `true`, the `title`, `navigateBack`, `closeModal`, `appBarRight`, and `backButton` props are ignored.\n   */\n  hideHeader?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\ninterface Props extends Omit<ModalFrontstageProps, \"closeModal\"> {\n  /**\n   * Callback for closing the modal Frontstage.\n   * @deprecated in 5.31.0. Use `navigateBack` prop instead.\n   */\n  closeModal?: () => void;\n}\n\n/**\n * The default layout used for modal frontstages.\n * Use `renderModalFrontstage` prop of {@link ConfigurableUiContent} to override the modal frontstage layout.\n * @public\n */\nexport function ModalFrontstage(props: Props) {\n  const {\n    isOpen,\n    navigateBack,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    closeModal,\n    backButton,\n    title,\n    appBarRight,\n    hideHeader,\n    ...rest\n  } = props;\n\n  const handleBack = () => {\n    navigateBack?.();\n    closeModal?.();\n  };\n\n  return (\n    <div\n      {...rest}\n      className={classnames(\n        \"uifw-modal-frontstage\",\n        isOpen && \"uifw-modal-open\",\n        hideHeader && \"uifw-no-header\",\n        props.className\n      )}\n    >\n      {hideHeader ? (\n        props.children\n      ) : (\n        <>\n          <div className=\"uifw-modal-app-bar\">\n            {backButton ? (\n              backButton\n            ) : (\n              <ModalFrontstageButton onClick={handleBack} />\n            )}\n            <Text variant=\"headline\" className=\"uifw-headline\">\n              {title}\n            </Text>\n            {appBarRight && (\n              <span className=\"uifw-modal-app-bar-right\">{appBarRight}</span>\n            )}\n          </div>\n          <div className=\"uifw-modal-stage-content\">{props.children}</div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}