@itwin/appui-react 4.17.6 → 5.0.0-dev.3

package/lib/appui-react/dialog/UiDataProvidedDialog.js

@@ -0,0 +1,134 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Dialog
+ */
+import { DialogButtonType } from "@itwin/appui-abstract";
+import * as React from "react";
+import { UiFramework } from "../UiFramework.js";
+import { getUniqueId } from "../layout/base/NineZone.js";
+import { ComponentGenerator } from "../uiprovider/ComponentGenerator.js";
+import { DefaultDialogGridContainer } from "../uiprovider/DefaultDialogGridContainer.js";
+import { Button, Dialog } from "@itwin/itwinui-react";
+import classnames from "classnames";
+import { useTranslation } from "../hooks/useTranslation.js";
+/** Component to show dialog populated from properties supplied via uiDataProvider
+ * @public
+ * @deprecated in 4.15.0. Use {@link https://itwinui.bentley.com/docs/dialog iTwinUI Dialog} instead.
+ */
+export function UiDataProvidedDialog({ uiDataProvider, id, isModal, title, movable, resizable, minWidth, minHeight, maxWidth, maxHeight, width, height, style, }) {
+    const dialogId = React.useRef(id ? id : getUniqueId());
+    const dialogIsModal = React.useRef(isModal);
+    const onOK = React.useRef();
+    const onCancel = React.useRef();
+    const closeDialog = () => {
+        if (dialogIsModal.current)
+            UiFramework.dialogs.modal.close();
+        else
+            UiFramework.dialogs.modeless.close(dialogId.current);
+    };
+    const handleOk = React.useCallback(() => {
+        onOK.current && onOK.current();
+        closeDialog();
+    }, []);
+    const handleCancel = React.useCallback(() => {
+        onCancel.current && onCancel.current();
+        closeDialog();
+    }, []);
+    const generateButtonCluster = React.useCallback((buttons) => {
+        if (buttons) {
+            for (const button of buttons) {
+                if (DialogButtonType.Cancel === button.type) {
+                    onCancel.current = button.onClick;
+                    button.onClick = handleCancel;
+                    continue;
+                }
+                if (DialogButtonType.OK === button.type) {
+                    onOK.current = button.onClick;
+                    button.onClick = handleOk;
+                    continue;
+                }
+            }
+        }
+        return buttons;
+    }, [handleCancel, handleOk]);
+    const [buttonCluster, setButtonCluster] = React.useState(() => generateButtonCluster(uiDataProvider.supplyButtonData()));
+    React.useEffect(() => {
+        return uiDataProvider.onItemsReloadedEvent.addListener(() => {
+            setButtonCluster(generateButtonCluster(uiDataProvider.supplyButtonData()));
+        });
+    }, [generateButtonCluster, uiDataProvider]);
+    React.useEffect(() => {
+        return uiDataProvider.onButtonsReloadedEvent.addListener(() => {
+            setButtonCluster(generateButtonCluster(uiDataProvider.supplyButtonData()));
+        });
+    }, [generateButtonCluster, uiDataProvider]);
+    const handleClose = React.useCallback(() => closeDialog(), []);
+    const containerStyle = {
+        minWidth,
+        minHeight,
+        maxWidth: maxWidth || "100%",
+        maxHeight,
+        width: width || "50%",
+        margin: "",
+        height,
+    };
+    return (React.createElement(Dialog, { isOpen: true, onClose: handleClose, closeOnEsc: true, closeOnExternalClick: false, isDraggable: movable, isResizable: resizable, preventDocumentScroll: true, style: style },
+        isModal && React.createElement(Dialog.Backdrop, null),
+        React.createElement(Dialog.Main, { style: containerStyle, "data-testid": "ui-data-provided-dialog-container" },
+            React.createElement(Dialog.TitleBar, { titleText: title }),
+            React.createElement(Dialog.Content, null,
+                React.createElement(DefaultDialogGridContainer, { componentGenerator: new ComponentGenerator(uiDataProvider) })),
+            React.createElement(Dialog.ButtonBar, null, buttonCluster &&
+                buttonCluster.map((button, index) => (React.createElement(DialogButton, { key: index, button: button })))))));
+}
+function DialogButton({ button }) {
+    const { translate } = useTranslation();
+    let buttonText = "";
+    let usePrimaryStyleType = false;
+    let buttonClass = button.className;
+    switch (button.type) {
+        case DialogButtonType.OK:
+            buttonText = translate("dialog.ok");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            usePrimaryStyleType = true;
+            break;
+        case DialogButtonType.Retry:
+            buttonText = translate("dialog.retry");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            usePrimaryStyleType = true;
+            break;
+        case DialogButtonType.Yes:
+            buttonText = translate("dialog.yes");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            usePrimaryStyleType = true;
+            break;
+        case DialogButtonType.No:
+            buttonText = translate("dialog.no");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            break;
+        case DialogButtonType.Cancel:
+            buttonText = translate("dialog.cancel");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            break;
+        case DialogButtonType.Close:
+            buttonText = translate("dialog.close");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            break;
+        case DialogButtonType.Next:
+            buttonText = translate("dialog.next");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            usePrimaryStyleType = true;
+            break;
+        case DialogButtonType.Previous:
+            buttonText = translate("dialog.previous");
+            buttonClass = classnames(buttonClass, button.buttonStyle);
+            usePrimaryStyleType = true;
+            break;
+    }
+    buttonText = button.label || buttonText;
+    return (React.createElement(Button, { className: buttonClass, disabled: button.disabled, styleType: usePrimaryStyleType ? "high-visibility" : undefined, onClick: button.onClick }, buttonText));
+}
+//# sourceMappingURL=UiDataProvidedDialog.js.map

package/lib/appui-react/dialog/UiDataProvidedDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiDataProvidedDialog.js","sourceRoot":"","sources":["../../../src/appui-react/dialog/UiDataProvidedDialog.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 Dialog\n */\n\nimport type {\n  DialogButtonDef,\n  DialogLayoutDataProvider,\n} from \"@itwin/appui-abstract\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport * as React from \"react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { getUniqueId } from \"../layout/base/NineZone.js\";\nimport { ComponentGenerator } from \"../uiprovider/ComponentGenerator.js\";\nimport { DefaultDialogGridContainer } from \"../uiprovider/DefaultDialogGridContainer.js\";\nimport { Button, Dialog } from \"@itwin/itwinui-react\";\nimport classnames from \"classnames\";\nimport { useTranslation } from \"../hooks/useTranslation.js\";\n\n/** Props for [[UiDataProvidedDialog]] component.\n * @public\n * @deprecated in 4.15.0. Props of deprecated {@link UiDataProvidedDialog} component.\n */\nexport interface UiDataProvidedDialogProps {\n  /** Dialog title */\n  title: string;\n  /** Provider that provides and lays out DialogItems */\n  uiDataProvider: DialogLayoutDataProvider;\n  /** Indicates if Dialog is Modal */\n  isModal: boolean;\n  /** Id used to specify dialog. */\n  id?: string;\n  /** Indicates whether the user can resize dialog with cursor. Default: false */\n  resizable?: boolean;\n  /** Indicates whether the user can move dialog with cursor. Default: false */\n  movable?: boolean;\n  /** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: \"50%\" */\n  width?: string | number;\n  /** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  height?: string | number;\n  /** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */\n  minWidth?: string | number;\n  /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */\n  minHeight?: string | number;\n  /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  maxWidth?: string | number;\n  /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  maxHeight?: string | number;\n  /** Custom CSS style properties. */\n  style?: React.CSSProperties;\n}\n\n/** Component to show dialog populated from properties supplied via uiDataProvider\n * @public\n * @deprecated in 4.15.0. Use {@link https://itwinui.bentley.com/docs/dialog iTwinUI Dialog} instead.\n */\nexport function UiDataProvidedDialog({\n  uiDataProvider,\n  id,\n  isModal,\n  title,\n  movable,\n  resizable,\n  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\n  width,\n  height,\n  style,\n}: // eslint-disable-next-line deprecation/deprecation\nUiDataProvidedDialogProps) {\n  const dialogId = React.useRef(id ? id : getUniqueId());\n  const dialogIsModal = React.useRef(isModal);\n  const onOK = React.useRef<() => void>();\n  const onCancel = React.useRef<() => void>();\n  const closeDialog = () => {\n    if (dialogIsModal.current) UiFramework.dialogs.modal.close();\n    else UiFramework.dialogs.modeless.close(dialogId.current);\n  };\n\n  const handleOk = React.useCallback(() => {\n    onOK.current && onOK.current();\n    closeDialog();\n  }, []);\n\n  const handleCancel = React.useCallback(() => {\n    onCancel.current && onCancel.current();\n    closeDialog();\n  }, []);\n\n  const generateButtonCluster = React.useCallback(\n    (buttons: DialogButtonDef[] | undefined) => {\n      if (buttons) {\n        for (const button of buttons) {\n          if (DialogButtonType.Cancel === button.type) {\n            onCancel.current = button.onClick;\n            button.onClick = handleCancel;\n            continue;\n          }\n          if (DialogButtonType.OK === button.type) {\n            onOK.current = button.onClick;\n            button.onClick = handleOk;\n            continue;\n          }\n        }\n      }\n      return buttons;\n    },\n    [handleCancel, handleOk]\n  );\n  const [buttonCluster, setButtonCluster] = React.useState(() =>\n    generateButtonCluster(uiDataProvider.supplyButtonData())\n  );\n\n  React.useEffect(() => {\n    return uiDataProvider.onItemsReloadedEvent.addListener(() => {\n      setButtonCluster(\n        generateButtonCluster(uiDataProvider.supplyButtonData())\n      );\n    });\n  }, [generateButtonCluster, uiDataProvider]);\n\n  React.useEffect(() => {\n    return uiDataProvider.onButtonsReloadedEvent.addListener(() => {\n      setButtonCluster(\n        generateButtonCluster(uiDataProvider.supplyButtonData())\n      );\n    });\n  }, [generateButtonCluster, uiDataProvider]);\n\n  const handleClose = React.useCallback(() => closeDialog(), []);\n\n  const containerStyle: React.CSSProperties = {\n    minWidth,\n    minHeight,\n    maxWidth: maxWidth || \"100%\",\n    maxHeight,\n    width: width || \"50%\",\n    margin: \"\",\n    height,\n  };\n\n  return (\n    <Dialog\n      isOpen={true}\n      onClose={handleClose}\n      closeOnEsc\n      closeOnExternalClick={false}\n      isDraggable={movable}\n      isResizable={resizable}\n      preventDocumentScroll\n      style={style}\n    >\n      {isModal && <Dialog.Backdrop />}\n      <Dialog.Main\n        style={containerStyle}\n        data-testid=\"ui-data-provided-dialog-container\"\n      >\n        <Dialog.TitleBar titleText={title} />\n        <Dialog.Content>\n          <DefaultDialogGridContainer\n            componentGenerator={new ComponentGenerator(uiDataProvider)}\n          />\n        </Dialog.Content>\n        <Dialog.ButtonBar>\n          {buttonCluster &&\n            buttonCluster.map((button, index) => (\n              <DialogButton key={index} button={button} />\n            ))}\n        </Dialog.ButtonBar>\n      </Dialog.Main>\n    </Dialog>\n  );\n}\n\nfunction DialogButton({ button }: { button: DialogButtonDef }) {\n  const { translate } = useTranslation();\n\n  let buttonText = \"\";\n  let usePrimaryStyleType = false;\n  let buttonClass = button.className;\n\n  switch (button.type) {\n    case DialogButtonType.OK:\n      buttonText = translate(\"dialog.ok\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      usePrimaryStyleType = true;\n      break;\n    case DialogButtonType.Retry:\n      buttonText = translate(\"dialog.retry\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      usePrimaryStyleType = true;\n      break;\n    case DialogButtonType.Yes:\n      buttonText = translate(\"dialog.yes\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      usePrimaryStyleType = true;\n      break;\n    case DialogButtonType.No:\n      buttonText = translate(\"dialog.no\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      break;\n    case DialogButtonType.Cancel:\n      buttonText = translate(\"dialog.cancel\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      break;\n    case DialogButtonType.Close:\n      buttonText = translate(\"dialog.close\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      break;\n    case DialogButtonType.Next:\n      buttonText = translate(\"dialog.next\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      usePrimaryStyleType = true;\n      break;\n    case DialogButtonType.Previous:\n      buttonText = translate(\"dialog.previous\");\n      buttonClass = classnames(buttonClass, button.buttonStyle);\n      usePrimaryStyleType = true;\n      break;\n  }\n\n  buttonText = button.label || buttonText;\n\n  return (\n    <Button\n      className={buttonClass}\n      disabled={button.disabled}\n      styleType={usePrimaryStyleType ? \"high-visibility\" : undefined}\n      onClick={button.onClick}\n    >\n      {buttonText}\n    </Button>\n  );\n}\n"]}

package/lib/appui-react/feedback/ElementTooltip.d.ts

@@ -0,0 +1,52 @@
+/** @packageDocumentation
+ * @module Notification
+ */
+import "./ElementTooltip.scss";
+import * as React from "react";
+import { UiEvent } from "@itwin/appui-abstract";
+import type { ToolTipOptions } from "@itwin/core-frontend";
+import type { XAndY } from "@itwin/core-geometry";
+import type { CommonProps } from "@itwin/core-react";
+import type { NotifyMessageType } from "../messages/ReactNotifyMessageDetails.js";
+/** [[ElementTooltip]] state. */
+interface ElementTooltipState {
+    isVisible: boolean;
+    message: NotifyMessageType;
+    position: XAndY;
+    options?: ToolTipOptions;
+}
+/** [[ElementTooltipChangedEvent]] arguments.
+ * @public
+ * @deprecated in 4.13.0. Event args are inferred from a listener. If explicit type is needed use a type helper.
+ */
+export interface ElementTooltipChangedEventArgs {
+    isTooltipVisible: boolean;
+    message: NotifyMessageType;
+    el?: HTMLElement;
+    pt?: XAndY;
+    options?: ToolTipOptions;
+}
+/** ElementTooltip Changed Event class.
+ * @public
+ * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.
+ */
+export declare class ElementTooltipChangedEvent extends UiEvent<ElementTooltipChangedEventArgs> {
+}
+/** ElementTooltip React component.
+ * @public
+ */
+export declare class ElementTooltip extends React.Component<CommonProps, // eslint-disable-line deprecation/deprecation
+ElementTooltipState> {
+    private static _elementTooltipChangedEvent;
+    private static _isTooltipVisible;
+    private static _isTooltipHalted;
+    static get onElementTooltipChangedEvent(): ElementTooltipChangedEvent;
+    static get isTooltipVisible(): boolean;
+    static showTooltip(el: HTMLElement, message: NotifyMessageType, pt?: XAndY, options?: ToolTipOptions): void;
+    static hideTooltip(): void;
+    static get isTooltipHalted(): boolean;
+    static set isTooltipHalted(halt: boolean);
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=ElementTooltip.d.ts.map

package/lib/appui-react/feedback/ElementTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementTooltip.d.ts","sourceRoot":"","sources":["../../../src/appui-react/feedback/ElementTooltip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AASlF,gCAAgC;AAChC,UAAU,mBAAmB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA8B;IAC7C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;GAGG;AACH,qBAAa,0BAA2B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;CAAG;AAE1F;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CACjD,WAAW,EAAE,8CAA8C;AAC3D,mBAAmB,CACpB;IACC,OAAO,CAAC,MAAM,CAAC,2BAA2B,CACQ;IAClD,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAU;IAC1C,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAU;IAEzC,WAAkB,4BAA4B,IAAI,0BAA0B,CAE3E;IAED,WAAkB,gBAAgB,IAAI,OAAO,CAE5C;WAEa,WAAW,CACvB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,iBAAiB,EAC1B,EAAE,CAAC,EAAE,KAAK,EACV,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI;WAYO,WAAW,IAAI,IAAI;IAQjC,WAAkB,eAAe,IAAI,OAAO,CAE3C;IAED,WAAkB,eAAe,CAAC,IAAI,EAAE,OAAO,EAG9C;IAEe,MAAM;CAGvB"}

package/lib/appui-react/feedback/ElementTooltip.js

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import "./ElementTooltip.scss";
+import classnames from "classnames";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { UiEvent } from "@itwin/appui-abstract";
+import { BeUiEvent } from "@itwin/core-bentley";
+import { MessageRenderer } from "@itwin/core-react";
+import { Rectangle } from "@itwin/core-react/internal";
+import { offsetAndContainInContainer, Tooltip, } from "../layout/popup/Tooltip.js";
+/** ElementTooltip Changed Event class.
+ * @public
+ * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.
+ */
+export class ElementTooltipChangedEvent extends UiEvent {
+}
+/** ElementTooltip React component.
+ * @public
+ */
+export class ElementTooltip extends React.Component {
+    static get onElementTooltipChangedEvent() {
+        return ElementTooltip._elementTooltipChangedEvent;
+    }
+    static get isTooltipVisible() {
+        return ElementTooltip._isTooltipVisible;
+    }
+    static showTooltip(el, message, pt, options) {
+        if (ElementTooltip._isTooltipHalted)
+            return;
+        ElementTooltip._isTooltipVisible = true;
+        ElementTooltip.onElementTooltipChangedEvent.emit({
+            isTooltipVisible: true,
+            el,
+            message,
+            pt,
+            options,
+        });
+    }
+    static hideTooltip() {
+        ElementTooltip._isTooltipVisible = false;
+        ElementTooltip.onElementTooltipChangedEvent.emit({
+            isTooltipVisible: false,
+            message: "",
+        });
+    }
+    static get isTooltipHalted() {
+        return ElementTooltip._isTooltipHalted;
+    }
+    static set isTooltipHalted(halt) {
+        ElementTooltip._isTooltipHalted = halt;
+        if (halt && ElementTooltip._isTooltipVisible)
+            ElementTooltip.hideTooltip();
+    }
+    render() {
+        return React.createElement(ElementTooltipComponent, null);
+    }
+}
+ElementTooltip._elementTooltipChangedEvent = new BeUiEvent();
+function ElementTooltipComponent(props) {
+    const [visible, setVisible] = React.useState(false);
+    const [message, setMessage] = React.useState("");
+    const [preferredPosition, setPreferredPosition] = React.useState(undefined);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    // Use a dedicated container for the tooltip to avoid z-index issues in the main window.
+    const [mainContainer, setMainContainer] = React.useState(undefined);
+    const [container, setContainer] = React.useState(undefined);
+    const [popout, setPopout] = React.useState(false);
+    const [size, setSize] = React.useState(undefined);
+    React.useEffect(() => {
+        return ElementTooltip.onElementTooltipChangedEvent.addListener((args) => {
+            const isPopout = args.el?.ownerDocument.defaultView !== window;
+            setPopout(isPopout);
+            setVisible(args.isTooltipVisible);
+            setMessage(args.message);
+            setContainer(args.el);
+            setPreferredPosition(args.pt);
+        });
+    }, []);
+    const portalContainer = popout ? container : mainContainer;
+    React.useLayoutEffect(() => {
+        if (!preferredPosition)
+            return;
+        // Use preferred position by default.
+        setPosition(preferredPosition);
+        if (!container)
+            return;
+        if (!size)
+            return;
+        // Contain the tooltip based on the container bounds.
+        const containerBounds = Rectangle.create(container.getBoundingClientRect());
+        const bounds = Rectangle.createFromSize(size).offset(preferredPosition);
+        const adjustedPosition = offsetAndContainInContainer(bounds, containerBounds.getSize(), { x: 8, y: 8 });
+        const newPosition = adjustedPosition.offset(containerBounds.topLeft());
+        setPosition(newPosition);
+    }, [container, size, preferredPosition]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classnames("uifw-feedback-elementTooltip_container", props.className), ref: (el) => setMainContainer(el ?? undefined) }),
+        portalContainer &&
+            visible &&
+            ReactDOM.createPortal(React.createElement(Tooltip, { className: classnames("uifw-feedback-elementTooltip", props.className), style: props.style, onSizeChanged: setSize, position: position },
+                React.createElement(MessageRenderer, { message: message })), portalContainer)));
+}
+//# sourceMappingURL=ElementTooltip.js.map

package/lib/appui-react/feedback/ElementTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementTooltip.js","sourceRoot":"","sources":["../../../src/appui-react/feedback/ElementTooltip.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 Notification\n */\n\nimport \"./ElementTooltip.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport { BeUiEvent } from \"@itwin/core-bentley\";\nimport type { ToolTipOptions } from \"@itwin/core-frontend\";\nimport type { XAndY } from \"@itwin/core-geometry\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { MessageRenderer } from \"@itwin/core-react\";\nimport { Rectangle } from \"@itwin/core-react/internal\";\nimport type { NotifyMessageType } from \"../messages/ReactNotifyMessageDetails.js\";\nimport {\n  offsetAndContainInContainer,\n  Tooltip,\n} from \"../layout/popup/Tooltip.js\";\nimport type { SizeProps } from \"../utils/SizeProps.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** [[ElementTooltip]] state. */\ninterface ElementTooltipState {\n  isVisible: boolean;\n  message: NotifyMessageType;\n  position: XAndY;\n  options?: ToolTipOptions;\n}\n\n/** [[ElementTooltipChangedEvent]] arguments.\n * @public\n * @deprecated in 4.13.0. Event args are inferred from a listener. If explicit type is needed use a type helper.\n */\nexport interface ElementTooltipChangedEventArgs {\n  isTooltipVisible: boolean;\n  message: NotifyMessageType;\n  el?: HTMLElement;\n  pt?: XAndY;\n  options?: ToolTipOptions;\n}\n\n/** ElementTooltip Changed Event class.\n * @public\n * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.\n */\nexport class ElementTooltipChangedEvent extends UiEvent<ElementTooltipChangedEventArgs> {}\n\n/** ElementTooltip React component.\n * @public\n */\nexport class ElementTooltip extends React.Component<\n  CommonProps, // eslint-disable-line deprecation/deprecation\n  ElementTooltipState\n> {\n  private static _elementTooltipChangedEvent =\n    new BeUiEvent<ElementTooltipChangedEventArgs>();\n  private static _isTooltipVisible: boolean;\n  private static _isTooltipHalted: boolean;\n\n  public static get onElementTooltipChangedEvent(): ElementTooltipChangedEvent {\n    return ElementTooltip._elementTooltipChangedEvent;\n  }\n\n  public static get isTooltipVisible(): boolean {\n    return ElementTooltip._isTooltipVisible;\n  }\n\n  public static showTooltip(\n    el: HTMLElement,\n    message: NotifyMessageType,\n    pt?: XAndY,\n    options?: ToolTipOptions\n  ): void {\n    if (ElementTooltip._isTooltipHalted) return;\n    ElementTooltip._isTooltipVisible = true;\n    ElementTooltip.onElementTooltipChangedEvent.emit({\n      isTooltipVisible: true,\n      el,\n      message,\n      pt,\n      options,\n    });\n  }\n\n  public static hideTooltip(): void {\n    ElementTooltip._isTooltipVisible = false;\n    ElementTooltip.onElementTooltipChangedEvent.emit({\n      isTooltipVisible: false,\n      message: \"\",\n    });\n  }\n\n  public static get isTooltipHalted(): boolean {\n    return ElementTooltip._isTooltipHalted;\n  }\n\n  public static set isTooltipHalted(halt: boolean) {\n    ElementTooltip._isTooltipHalted = halt;\n    if (halt && ElementTooltip._isTooltipVisible) ElementTooltip.hideTooltip();\n  }\n\n  public override render() {\n    return <ElementTooltipComponent />;\n  }\n}\n\nfunction ElementTooltipComponent(props: CommonProps) {\n  const [visible, setVisible] = React.useState(false);\n  const [message, setMessage] = React.useState<NotifyMessageType>(\"\");\n  const [preferredPosition, setPreferredPosition] = React.useState<\n    XAndY | undefined\n  >(undefined);\n  const [position, setPosition] = React.useState<XAndY>({ x: 0, y: 0 });\n\n  // Use a dedicated container for the tooltip to avoid z-index issues in the main window.\n  const [mainContainer, setMainContainer] = React.useState<\n    HTMLDivElement | undefined\n  >(undefined);\n  const [container, setContainer] = React.useState<HTMLElement | undefined>(\n    undefined\n  );\n  const [popout, setPopout] = React.useState(false);\n  const [size, setSize] = React.useState<SizeProps | undefined>(undefined);\n\n  React.useEffect(() => {\n    return ElementTooltip.onElementTooltipChangedEvent.addListener((args) => {\n      const isPopout = args.el?.ownerDocument.defaultView !== window;\n      setPopout(isPopout);\n      setVisible(args.isTooltipVisible);\n      setMessage(args.message);\n      setContainer(args.el);\n      setPreferredPosition(args.pt);\n    });\n  }, []);\n\n  const portalContainer = popout ? container : mainContainer;\n\n  React.useLayoutEffect(() => {\n    if (!preferredPosition) return;\n\n    // Use preferred position by default.\n    setPosition(preferredPosition);\n\n    if (!container) return;\n    if (!size) return;\n\n    // Contain the tooltip based on the container bounds.\n    const containerBounds = Rectangle.create(container.getBoundingClientRect());\n    const bounds = Rectangle.createFromSize(size).offset(preferredPosition);\n    const adjustedPosition = offsetAndContainInContainer(\n      bounds,\n      containerBounds.getSize(),\n      { x: 8, y: 8 }\n    );\n    const newPosition = adjustedPosition.offset(containerBounds.topLeft());\n    setPosition(newPosition);\n  }, [container, size, preferredPosition]);\n\n  return (\n    <>\n      <div\n        className={classnames(\n          \"uifw-feedback-elementTooltip_container\",\n          props.className\n        )}\n        ref={(el) => setMainContainer(el ?? undefined)}\n      />\n      {portalContainer &&\n        visible &&\n        ReactDOM.createPortal(\n          <Tooltip\n            className={classnames(\n              \"uifw-feedback-elementTooltip\",\n              props.className\n            )}\n            style={props.style}\n            onSizeChanged={setSize}\n            position={position}\n          >\n            <MessageRenderer message={message} />\n          </Tooltip>,\n          portalContainer\n        )}\n    </>\n  );\n}\n"]}

package/lib/appui-react/feedback/ElementTooltip.scss

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+@use "../variables" as *;
+
+.uifw-feedback-elementTooltip {
+  pointer-events: none;
+  width: max-content;
+  font-size: var(--iui-font-size-1);
+  border: {
+    color: $uifw-popup-border-color;
+    radius: $uifw-popup-border-radius;
+    style: solid;
+    width: $uifw-popup-border-width;
+  }
+}
+
+.uifw-feedback-elementTooltip_container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  @include uicore-z-index(tooltip);
+}

package/lib/appui-react/feedback/ValidationTextbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationTextbox.d.ts","sourceRoot":"","sources":["../../../src/appui-react/feedback/ValidationTextbox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,oBAAY,WAAW;IACrB,KAAK,IAAI;IACT,OAAO,IAAI;CACZ;AAED;;GAEG;AAEH,UAAU,sBAAuB,SAAQ,WAAW;IAClD,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,CAAC;IAChD,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CACxD,sBAAsB,EACtB,sBAAsB,CACvB;gBACa,KAAK,EAAE,sBAAsB;IAMzB,MAAM,IAAI,KAAK,CAAC,SAAS;IAoCzC,OAAO,CAAC,mBAAmB;IAgB3B;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAEnB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAQzB,0BAA0B;IAC1B,OAAO,CAAC,iBAAiB;IAIzB,8BAA8B;IAC9B,OAAO,CAAC,iBAAiB;IASzB;;;OAGG;IACH,OAAO,CAAC,YAAY,CAWlB;CACH"}

package/lib/appui-react/feedback/ValidationTextbox.js

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import "./ValidationTextbox.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Key } from "ts-key-enum";
+import { MessageManager } from "../messages/MessageManager.js";
+import { Input } from "@itwin/itwinui-react";
+/** Enum for Input Status used in [[ValidationTextbox]]
+ * @alpha
+ */
+export var InputStatus;
+(function (InputStatus) {
+    InputStatus[InputStatus["Valid"] = 0] = "Valid";
+    InputStatus[InputStatus["Invalid"] = 1] = "Invalid";
+})(InputStatus || (InputStatus = {}));
+/**
+ * Input box that validates text based on provided criteria. Defaults to checking
+ * for empty if no method for onValueChanged is provided.
+ * @alpha
+ */
+export class ValidationTextbox extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        /**
+         * Determines if value is valid and resolves any defined functions.
+         * Also will show or hide error message if defined.
+         * @param event   Button press event that triggers validation
+         */
+        this._validateText = (event) => {
+            this.processValidateText(event.target);
+        };
+        /**
+         * Manages special key codes by calling user defined functions
+         * @param event   Keyup event
+         */
+        this._handleKeyUp = (event) => {
+            this.processValidateText(event.target);
+            switch (event.key) {
+                case Key.Escape.valueOf():
+                    if (this.props.onEscPressed)
+                        this.props.onEscPressed();
+                    break;
+                case Key.Enter.valueOf():
+                    if (this.props.onEnterPressed)
+                        this.props.onEnterPressed();
+                    break;
+            }
+        };
+        this.state = { isValid: true };
+    }
+    render() {
+        const sizeStyle = {
+            width: this.props.size ? `${this.props.size.toString()}em` : "12em",
+        };
+        const divStyle = {
+            ...sizeStyle,
+            ...this.props.style,
+        };
+        const validClassNames = classnames("ValidationTextbox-input");
+        const invalidClassNames = classnames("ValidationTextbox-input", "ValidationTextbox-invalid");
+        return (React.createElement("div", { className: classnames("uifw-ValidationTextbox", this.props.className), style: divStyle },
+            React.createElement(Input, { className: this.state.isValid ? validClassNames : invalidClassNames, onChange: this._validateText, onKeyUp: this._handleKeyUp, onPaste: this._validateText, onCut: this._validateText, onBlur: this._validateText, placeholder: this.props.placeholder ? this.props.placeholder : "", style: sizeStyle }),
+            this.props.children));
+    }
+    processValidateText(target) {
+        if (undefined === target)
+            return;
+        const value = target.value;
+        const isValid = this._calculateIsValid(value);
+        this.setState({ isValid }, () => {
+            if (this.state.isValid) {
+                this._hideErrorMessage();
+            }
+            else {
+                if (this.props.errorText && !this.state.isValid)
+                    this._showErrorMessage(target);
+            }
+        });
+    }
+    /**
+     * Determines if value provided is valid by calling user defined
+     * function. If no function is provided, the default criteria for
+     * validity is if the value has been defined.
+     * @param value   The value provided in textbox
+     */
+    _calculateIsValid(value) {
+        if (this.props.onValueChanged)
+            return this.props.onValueChanged(value) === InputStatus.Valid
+                ? true
+                : false;
+        return value.length > 0;
+    }
+    /** Hides error message */
+    _hideErrorMessage() {
+        MessageManager.hideInputFieldMessage();
+    }
+    /** Displays error message. */
+    _showErrorMessage(target) {
+        MessageManager.displayInputFieldMessage(target, this.props.errorText, this.props.detailedErrorText);
+        return;
+    }
+}
+//# sourceMappingURL=ValidationTextbox.js.map

package/lib/appui-react/feedback/ValidationTextbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationTextbox.js","sourceRoot":"","sources":["../../../src/appui-react/feedback/ValidationTextbox.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 Notification\n */\n\nimport \"./ValidationTextbox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { MessageManager } from \"../messages/MessageManager.js\";\nimport { Input } from \"@itwin/itwinui-react\";\n\n/** Enum for Input Status used in [[ValidationTextbox]]\n * @alpha\n */\nexport enum InputStatus {\n  Valid = 0,\n  Invalid = 1,\n}\n\n/** Property interface for ValidationTextbox\n * @alpha\n */\n// eslint-disable-next-line deprecation/deprecation\ninterface ValidationTextboxProps extends CommonProps {\n  /** value to set ValidationTextbox to initially */\n  initialValue?: string;\n  /** placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** triggered when the content of ValidationTextbox is changed. Return true if valid */\n  onValueChanged?: (value: string) => InputStatus;\n  /** listens for <Enter> key presses */\n  onEnterPressed?: () => void;\n  /** listens for <Esc> key presses */\n  onEscPressed?: () => void;\n  /** width of ValidationTextbox, measured in em */\n  size?: number;\n  /** Error message to display */\n  errorText?: string;\n  /** Detailed error message to display */\n  detailedErrorText?: string;\n  /** Content */\n  children?: React.ReactNode;\n}\n\ninterface ValidationTextboxState {\n  isValid: boolean;\n}\n\n/**\n * Input box that validates text based on provided criteria. Defaults to checking\n * for empty if no method for onValueChanged is provided.\n * @alpha\n */\nexport class ValidationTextbox extends React.PureComponent<\n  ValidationTextboxProps,\n  ValidationTextboxState\n> {\n  constructor(props: ValidationTextboxProps) {\n    super(props);\n\n    this.state = { isValid: true };\n  }\n\n  public override render(): React.ReactNode {\n    const sizeStyle: React.CSSProperties = {\n      width: this.props.size ? `${this.props.size.toString()}em` : \"12em\",\n    };\n    const divStyle: React.CSSProperties = {\n      ...sizeStyle,\n      ...this.props.style,\n    };\n\n    const validClassNames = classnames(\"ValidationTextbox-input\");\n\n    const invalidClassNames = classnames(\n      \"ValidationTextbox-input\",\n      \"ValidationTextbox-invalid\"\n    );\n\n    return (\n      <div\n        className={classnames(\"uifw-ValidationTextbox\", this.props.className)}\n        style={divStyle}\n      >\n        <Input\n          className={this.state.isValid ? validClassNames : invalidClassNames}\n          onChange={this._validateText}\n          onKeyUp={this._handleKeyUp}\n          onPaste={this._validateText}\n          onCut={this._validateText}\n          onBlur={this._validateText}\n          placeholder={this.props.placeholder ? this.props.placeholder : \"\"}\n          style={sizeStyle}\n        />\n        {this.props.children}\n      </div>\n    );\n  }\n\n  private processValidateText(target: HTMLInputElement | undefined): void {\n    if (undefined === target) return;\n\n    const value = target.value;\n    const isValid = this._calculateIsValid(value);\n\n    this.setState({ isValid }, () => {\n      if (this.state.isValid) {\n        this._hideErrorMessage();\n      } else {\n        if (this.props.errorText && !this.state.isValid)\n          this._showErrorMessage(target);\n      }\n    });\n  }\n\n  /**\n   * Determines if value is valid and resolves any defined functions.\n   * Also will show or hide error message if defined.\n   * @param event   Button press event that triggers validation\n   */\n  private _validateText = (event?: any): void => {\n    this.processValidateText(event.target as HTMLInputElement);\n  };\n\n  /**\n   * Determines if value provided is valid by calling user defined\n   * function. If no function is provided, the default criteria for\n   * validity is if the value has been defined.\n   * @param value   The value provided in textbox\n   */\n  private _calculateIsValid(value: string): boolean {\n    if (this.props.onValueChanged)\n      return this.props.onValueChanged(value) === InputStatus.Valid\n        ? true\n        : false;\n    return value.length > 0;\n  }\n\n  /** Hides error message */\n  private _hideErrorMessage() {\n    MessageManager.hideInputFieldMessage();\n  }\n\n  /** Displays error message. */\n  private _showErrorMessage(target: Element) {\n    MessageManager.displayInputFieldMessage(\n      target as HTMLElement,\n      this.props.errorText!,\n      this.props.detailedErrorText\n    );\n    return;\n  }\n\n  /**\n   * Manages special key codes by calling user defined functions\n   * @param event   Keyup event\n   */\n  private _handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    this.processValidateText(event.target as HTMLInputElement);\n\n    switch (event.key) {\n      case Key.Escape.valueOf():\n        if (this.props.onEscPressed) this.props.onEscPressed();\n        break;\n      case Key.Enter.valueOf():\n        if (this.props.onEnterPressed) this.props.onEnterPressed();\n        break;\n    }\n  };\n}\n"]}

package/lib/appui-react/feedback/ValidationTextbox.scss

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/inputs/variables" as *;
+@use "~@itwin/core-react/lib/core-react/style/baseline" as *;
+
+.uifw-ValidationTextbox {
+  font-family: var(--iui-font-sans);
+  position: relative;
+  padding: $uicore-unbordered-padding;
+  width: 12em;
+  height: 1em;
+
+  .ValidationTextbox-input {
+    position: absolute;
+    min-height: 28px;
+    padding: $uicore-iui-input-padding;
+    width: 12em;
+    left: 0px;
+    top: 0px;
+  }
+
+  .ValidationTextbox-invalid {
+    border-color: var(--iui-color-text-negative);
+  }
+
+  .ValidationTextbox-invalid:focus {
+    border-color: var(--iui-color-text-negative);
+  }
+
+  .ValidationTextbox-icon {
+    position: absolute;
+    padding: $uicore-bordered-padding;
+    width: var(--iui-size-l);
+    height: var(--iui-size-l);
+    line-height: var(--iui-size-l);
+    font-size: var(--iui-font-size-2);
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+    text-align: center;
+    color: var(--iui-color-text);
+
+    &:hover {
+      color: var(--iui-color-text-accent);
+    }
+  }
+}

package/lib/appui-react/framework/FrameworkBackstage.d.ts

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module Backstage
+ */
+import type { BeEvent } from "@itwin/core-bentley";
+import type { IconSpec } from "@itwin/core-react";
+import type { CommandItemDef } from "../shared/CommandItemDef.js";
+/** Arguments of [[Backstage.onToggled]].
+ * @public
+ */
+export interface BackstageToggledArgs {
+    readonly isOpen: boolean;
+}
+/**
+ * [[UiFramework.backstage]] interface.
+ * @public
+ */
+export interface FrameworkBackstage {
+    /**
+     * Event activated when the backstage is toggled.
+     */
+    readonly onToggled: BeEvent<(args: BackstageToggledArgs) => void>;
+    /**
+     * State of the backstage.
+     */
+    readonly isOpen: boolean;
+    /**
+     * Display the backstage.
+     */
+    open(): void;
+    /**
+     * Hides the backstage.
+     */
+    close(): void;
+    /**
+     * Toggle the backstage.
+     */
+    toggle(): void;
+    /** Creates a CommandItemDef that toggles the backstage.
+     * @param overrideIconSpec Icon to replace the default 'home'.
+     * @deprecated in 4.15.0. Use {@link BackstageAppButton} component or {@link FrameworkBackstage.toggle} instead.
+     */
+    getBackstageToggleCommand(overrideIconSpec?: IconSpec): CommandItemDef;
+}
+//# sourceMappingURL=FrameworkBackstage.d.ts.map

package/lib/appui-react/framework/FrameworkBackstage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameworkBackstage.d.ts","sourceRoot":"","sources":["../../../src/appui-react/framework/FrameworkBackstage.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAGlE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC,CAAC;IAClE;;OAEG;IACH,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,IAAI,IAAI,CAAC;IACb;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;IACd;;OAEG;IACH,MAAM,IAAI,IAAI,CAAC;IACf;;;OAGG;IAEH,yBAAyB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;CACxE"}

package/lib/appui-react/framework/FrameworkBackstage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameworkBackstage.js","sourceRoot":"","sources":["../../../src/appui-react/framework/FrameworkBackstage.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG","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 type { BeEvent } from \"@itwin/core-bentley\";\nimport type { IconSpec } from \"@itwin/core-react\";\nimport type { CommandItemDef } from \"../shared/CommandItemDef.js\";\nimport type { BackstageAppButton } from \"../widgets/BackstageAppButton.js\";\n\n/** Arguments of [[Backstage.onToggled]].\n * @public\n */\nexport interface BackstageToggledArgs {\n  readonly isOpen: boolean;\n}\n\n/**\n * [[UiFramework.backstage]] interface.\n * @public\n */\nexport interface FrameworkBackstage {\n  /**\n   * Event activated when the backstage is toggled.\n   */\n  readonly onToggled: BeEvent<(args: BackstageToggledArgs) => void>;\n  /**\n   * State of the backstage.\n   */\n  readonly isOpen: boolean;\n  /**\n   * Display the backstage.\n   */\n  open(): void;\n  /**\n   * Hides the backstage.\n   */\n  close(): void;\n  /**\n   * Toggle the backstage.\n   */\n  toggle(): void;\n  /** Creates a CommandItemDef that toggles the backstage.\n   * @param overrideIconSpec Icon to replace the default 'home'.\n   * @deprecated in 4.15.0. Use {@link BackstageAppButton} component or {@link FrameworkBackstage.toggle} instead.\n   */\n  // eslint-disable-next-line deprecation/deprecation\n  getBackstageToggleCommand(overrideIconSpec?: IconSpec): CommandItemDef;\n}\n"]}