@itwin/appui-react 4.8.3 → 4.9.0

package/lib/cjs/appui-react/layout/base/usePointerCaptor.js

@@ -0,0 +1,106 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Base
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePointerCaptor = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("./DragManager");
+/** Captures mouse and touch events of an element. Used in drag or resize interactions.
+ * @internal
+ */
+const usePointerCaptor = (onPointerDown, onPointerMove, onPointerUp) => {
+    const dragManager = React.useContext(DragManager_1.DragManagerContext);
+    const isDown = React.useRef(false);
+    React.useEffect(() => {
+        const mouseMove = (e) => {
+            isDown.current && onPointerMove && onPointerMove(e, e);
+        };
+        document.addEventListener("mousemove", mouseMove);
+        return () => {
+            document.removeEventListener("mousemove", mouseMove);
+        };
+    }, [onPointerMove]);
+    React.useEffect(() => {
+        const mouseUp = (e) => {
+            isDown.current && onPointerUp && onPointerUp(e);
+            isDown.current = false;
+        };
+        document.addEventListener("mouseup", mouseUp);
+        return () => {
+            document.removeEventListener("mouseup", mouseUp);
+        };
+    }, [onPointerUp]);
+    const setRef = (0, core_react_1.useRefEffect)((instance) => {
+        let touchTarget = null;
+        const mouseDown = (e) => {
+            onPointerDown && onPointerDown(e, e);
+            isDown.current = true;
+        };
+        const touchMove = (e) => {
+            if (e.touches.length !== 1)
+                return;
+            isDown.current && onPointerMove && onPointerMove(e.touches[0], e);
+            isDown.current &&
+                dragManager.handleDrag(e.touches[0].clientX, e.touches[0].clientY);
+        };
+        const targetTouchMove = (e) => {
+            e.cancelable && e.preventDefault();
+            touchMove(e);
+        };
+        const documentTouchMove = (e) => {
+            // Do not handle document touch move if it was handled by target handler.
+            if (touchTarget === e.target)
+                return;
+            touchMove(e);
+        };
+        const touchEnd = (e) => {
+            isDown.current && onPointerUp && onPointerUp(e);
+            isDown.current && dragManager.handleDragEnd();
+            isDown.current = false;
+            touchTarget = null;
+            if (e.target instanceof HTMLElement) {
+                e.target.removeEventListener("touchmove", targetTouchMove);
+                e.target.removeEventListener("touchend", touchEnd);
+            }
+            document.removeEventListener("touchmove", documentTouchMove);
+            document.removeEventListener("touchend", documentTouchEnd);
+        };
+        const documentTouchEnd = (e) => {
+            // Do not handle document touch move if it was handled by target handler.
+            if (touchTarget === e.target)
+                return;
+            touchEnd(e);
+        };
+        const touchStart = (e) => {
+            e.cancelable && e.preventDefault();
+            if (e.touches.length !== 1)
+                return;
+            touchTarget = e.target;
+            // In case of implicit pointer capture attach to event target.
+            if (e.target instanceof HTMLElement) {
+                e.target.addEventListener("touchmove", targetTouchMove);
+                e.target.addEventListener("touchend", touchEnd);
+            }
+            // Add to document in case the target looses capture (i.e. is removed)
+            document.addEventListener("touchmove", documentTouchMove);
+            document.addEventListener("touchend", documentTouchEnd);
+            onPointerDown && onPointerDown(e.touches[0], e);
+            isDown.current = true;
+        };
+        instance && instance.addEventListener("mousedown", mouseDown);
+        instance && instance.addEventListener("touchstart", touchStart);
+        return () => {
+            instance && instance.removeEventListener("mousedown", mouseDown);
+            instance && instance.removeEventListener("touchstart", touchStart);
+        };
+    }, [onPointerDown, onPointerMove, onPointerUp, dragManager]);
+    return setRef;
+};
+exports.usePointerCaptor = usePointerCaptor;
+//# sourceMappingURL=usePointerCaptor.js.map

package/lib/cjs/appui-react/layout/base/usePointerCaptor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePointerCaptor.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/base/usePointerCaptor.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 Base\n */\n\nimport * as React from \"react\";\nimport { useRefEffect } from \"@itwin/core-react\";\nimport { DragManagerContext } from \"./DragManager\";\n\n/** @internal */\nexport interface PointerCaptorArgs {\n  readonly clientX: number;\n  readonly clientY: number;\n}\n\n/** @internal */\nexport type PointerCaptorEvent = MouseEvent | TouchEvent;\n\n/** Captures mouse and touch events of an element. Used in drag or resize interactions.\n * @internal\n */\nexport const usePointerCaptor = <T extends HTMLElement>(\n  onPointerDown?: (args: PointerCaptorArgs, e: PointerCaptorEvent) => void,\n  onPointerMove?: (args: PointerCaptorArgs, e: PointerCaptorEvent) => void,\n  onPointerUp?: (e: PointerCaptorEvent) => void\n) => {\n  const dragManager = React.useContext(DragManagerContext);\n  const isDown = React.useRef(false);\n  React.useEffect(() => {\n    const mouseMove = (e: MouseEvent) => {\n      isDown.current && onPointerMove && onPointerMove(e, e);\n    };\n    document.addEventListener(\"mousemove\", mouseMove);\n    return () => {\n      document.removeEventListener(\"mousemove\", mouseMove);\n    };\n  }, [onPointerMove]);\n  React.useEffect(() => {\n    const mouseUp = (e: MouseEvent) => {\n      isDown.current && onPointerUp && onPointerUp(e);\n      isDown.current = false;\n    };\n    document.addEventListener(\"mouseup\", mouseUp);\n    return () => {\n      document.removeEventListener(\"mouseup\", mouseUp);\n    };\n  }, [onPointerUp]);\n  const setRef = useRefEffect(\n    (instance: T | null) => {\n      let touchTarget: EventTarget | null = null;\n      const mouseDown = (e: MouseEvent) => {\n        onPointerDown && onPointerDown(e, e);\n        isDown.current = true;\n      };\n      const touchMove = (e: TouchEvent) => {\n        if (e.touches.length !== 1) return;\n        isDown.current && onPointerMove && onPointerMove(e.touches[0], e);\n        isDown.current &&\n          dragManager.handleDrag(e.touches[0].clientX, e.touches[0].clientY);\n      };\n      const targetTouchMove = (e: TouchEvent) => {\n        e.cancelable && e.preventDefault();\n        touchMove(e);\n      };\n      const documentTouchMove = (e: TouchEvent) => {\n        // Do not handle document touch move if it was handled by target handler.\n        if (touchTarget === e.target) return;\n        touchMove(e);\n      };\n      const touchEnd = (e: TouchEvent) => {\n        isDown.current && onPointerUp && onPointerUp(e);\n        isDown.current && dragManager.handleDragEnd();\n        isDown.current = false;\n        touchTarget = null;\n        if (e.target instanceof HTMLElement) {\n          e.target.removeEventListener(\"touchmove\", targetTouchMove);\n          e.target.removeEventListener(\"touchend\", touchEnd);\n        }\n        document.removeEventListener(\"touchmove\", documentTouchMove);\n        document.removeEventListener(\"touchend\", documentTouchEnd);\n      };\n      const documentTouchEnd = (e: TouchEvent) => {\n        // Do not handle document touch move if it was handled by target handler.\n        if (touchTarget === e.target) return;\n        touchEnd(e);\n      };\n      const touchStart = (e: TouchEvent) => {\n        e.cancelable && e.preventDefault();\n        if (e.touches.length !== 1) return;\n        touchTarget = e.target;\n        // In case of implicit pointer capture attach to event target.\n        if (e.target instanceof HTMLElement) {\n          e.target.addEventListener(\"touchmove\", targetTouchMove);\n          e.target.addEventListener(\"touchend\", touchEnd);\n        }\n        // Add to document in case the target looses capture (i.e. is removed)\n        document.addEventListener(\"touchmove\", documentTouchMove);\n        document.addEventListener(\"touchend\", documentTouchEnd);\n        onPointerDown && onPointerDown(e.touches[0], e);\n        isDown.current = true;\n      };\n\n      instance && instance.addEventListener(\"mousedown\", mouseDown);\n      instance && instance.addEventListener(\"touchstart\", touchStart);\n      return () => {\n        instance && instance.removeEventListener(\"mousedown\", mouseDown);\n        instance && instance.removeEventListener(\"touchstart\", touchStart);\n      };\n    },\n    [onPointerDown, onPointerMove, onPointerUp, dragManager]\n  );\n  return setRef;\n};\n"]}

package/lib/cjs/appui-react/layout/footer/Footer.d.ts

@@ -0,0 +1,33 @@
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Footer.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import type { SafeAreaInsets } from "../../safearea/SafeAreaInsets";
+/** Properties of [[Footer]] component.
+ * @internal
+ */
+export interface FooterProps extends CommonProps {
+    /**
+     * Footer indicators, separators and status fields. I.e: [StatusBarSeparator]($appui-react), [[FooterIndicator]],
+     * [[MessageCenter]], [[ToolAssistance]], [[SnapMode]]
+     */
+    children?: React.ReactNode;
+    /** Footer messages. I.e. [[Message]], [[Toast]] */
+    messages?: React.ReactNode;
+    /** Handler for mouse enter */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Handler for mouse leave */
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /** Describes respected safe area insets. */
+    safeAreaInsets?: SafeAreaInsets;
+}
+/** Footer component.
+ * @note Use [StatusBar]($appui-react) instead
+ * @internal
+ */
+export declare class Footer extends React.PureComponent<FooterProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Footer.d.ts.map

package/lib/cjs/appui-react/layout/footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Footer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,4CAA4C;IAC5C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1C,MAAM;CAsBvB"}

package/lib/cjs/appui-react/layout/footer/Footer.js

@@ -0,0 +1,30 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Footer
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+require("./Footer.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const SafeAreaInsets_1 = require("../base/SafeAreaInsets");
+/** Footer component.
+ * @note Use [StatusBar]($appui-react) instead
+ * @internal
+ */
+class Footer extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-footer", this.props.safeAreaInsets &&
+            SafeAreaInsets_1.SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets), this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave },
+            React.createElement("div", null,
+                React.createElement("div", { className: "nz-messages" }, this.props.messages),
+                React.createElement("div", { className: "nz-indicators" }, this.props.children))));
+    }
+}
+exports.Footer = Footer;
+//# sourceMappingURL=Footer.js.map

package/lib/cjs/appui-react/layout/footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Footer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,2DAA+D;AAsB/D;;;GAGG;AACH,MAAa,MAAO,SAAQ,KAAK,CAAC,aAA0B;IAC1C,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,kBAAkB,EAClB,IAAI,CAAC,KAAK,CAAC,cAAc;YACvB,sCAAqB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EACnE,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;YAErC;gBACE,6BAAK,SAAS,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO;gBACxD,6BAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACtD,CACF,CACP,CAAC;IACJ,CAAC;CACF;AAvBD,wBAuBC","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 Footer\n */\n\nimport \"./Footer.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets\";\nimport type { SafeAreaInsets } from \"../../safearea/SafeAreaInsets\";\n\n/** Properties of [[Footer]] component.\n * @internal\n */\nexport interface FooterProps extends CommonProps {\n  /**\n   * Footer indicators, separators and status fields. I.e: [StatusBarSeparator]($appui-react), [[FooterIndicator]],\n   * [[MessageCenter]], [[ToolAssistance]], [[SnapMode]]\n   */\n  children?: React.ReactNode;\n  /** Footer messages. I.e. [[Message]], [[Toast]] */\n  messages?: React.ReactNode;\n  /** Handler for mouse enter */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Handler for mouse leave */\n  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /** Describes respected safe area insets. */\n  safeAreaInsets?: SafeAreaInsets;\n}\n\n/** Footer component.\n * @note Use [StatusBar]($appui-react) instead\n * @internal\n */\nexport class Footer extends React.PureComponent<FooterProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-footer\",\n      this.props.safeAreaInsets &&\n        SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets),\n      this.props.className\n    );\n\n    return (\n      <div\n        className={className}\n        style={this.props.style}\n        onMouseEnter={this.props.onMouseEnter}\n        onMouseLeave={this.props.onMouseLeave}\n      >\n        <div>\n          <div className=\"nz-messages\">{this.props.messages}</div>\n          <div className=\"nz-indicators\">{this.props.children}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/Footer.scss

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "../safearea";
+@import "../widgetopacity";
+@import "variables";
+
+.nz-footer-footer {
+  position: relative;
+
+  > div {
+    background-color: var(--iui-color-background);
+
+    border: {
+      width: 0;
+      top-width: 1px;
+      color: var(--iui-color-border);
+      style: solid;
+    }
+
+    box-sizing: border-box;
+    bottom: 0;
+    width: 100%;
+    pointer-events: auto;
+
+    > .nz-messages {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-100%);
+
+      @include uicore-z-index(status-message);
+    }
+
+    > .nz-indicators {
+      display: flex;
+      flex-direction: row;
+      height: $footer-height;
+    }
+  }
+
+  &.nz-safe-area-left {
+    > div {
+      @include nz-safe-area-left;
+    }
+  }
+
+  &.nz-safe-area-right {
+    > div {
+      @include nz-safe-area-right;
+    }
+  }
+
+  &.nz-safe-area-bottom {
+    > div {
+      @include nz-safe-area-bottom;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/footer/Indicator.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[FooterIndicator]] component.
+ * @internal
+ */
+export interface FooterIndicatorProps extends CommonProps {
+    /** Indicator content. */
+    children?: React.ReactNode;
+    /** Title for the indicator */
+    title?: string;
+    /** Function called when the indicator is clicked */
+    onClick?: (event: React.MouseEvent) => void;
+}
+/** Indicator used in [[Footer]] component.
+ * @note Use [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+export declare const FooterIndicator: React.ForwardRefExoticComponent<FooterIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Indicator.d.ts.map

package/lib/cjs/appui-react/layout/footer/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,6FAa1B,CAAC"}

package/lib/cjs/appui-react/layout/footer/Indicator.js

@@ -0,0 +1,23 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Footer
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterIndicator = void 0;
+require("./Indicator.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Indicator used in [[Footer]] component.
+ * @note Use [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+exports.FooterIndicator = React.forwardRef(function FooterIndicator(props, ref) {
+    const { children, ...attributes } = props;
+    const className = (0, classnames_1.default)("nz-footer-indicator", props.className);
+    return (React.createElement("div", { ref: ref, ...{ ...attributes, className } }, children));
+});
+//# sourceMappingURL=Indicator.js.map

package/lib/cjs/appui-react/layout/footer/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Indicator.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAe/B;;;GAGG;AACU,QAAA,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE1C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAErE,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,KAAM,EAAE,GAAG,UAAU,EAAE,SAAS,EAAE,IAC5C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,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 Footer\n */\n\nimport \"./Indicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[FooterIndicator]] component.\n * @internal\n */\nexport interface FooterIndicatorProps extends CommonProps {\n  /** Indicator content. */\n  children?: React.ReactNode;\n  /** Title for the indicator */\n  title?: string;\n  /** Function called when the indicator is clicked */\n  onClick?: (event: React.MouseEvent) => void;\n}\n\n/** Indicator used in [[Footer]] component.\n * @note Use [StatusBarIndicator]($appui-react) instead\n * @internal\n */\nexport const FooterIndicator = React.forwardRef<\n  HTMLDivElement,\n  FooterIndicatorProps\n>(function FooterIndicator(props, ref) {\n  const { children, ...attributes } = props;\n\n  const className = classnames(\"nz-footer-indicator\", props.className);\n\n  return (\n    <div ref={ref} {...{ ...attributes, className }}>\n      {children}\n    </div>\n  );\n});\n"]}

package/lib/cjs/appui-react/layout/footer/Indicator.scss

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/index";
+@import "variables";
+
+.nz-footer-indicator {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--iui-color-text);
+  font-size: $text-font-size;
+  box-sizing: border-box;
+
+  /* Desktop */
+  @include for-medium-desktop-up {
+    padding-left: $nz-footer-indicator-horizontal-padding;
+    padding-right: $nz-footer-indicator-horizontal-padding;
+  }
+
+  /* Medium devices */
+  @include for-small-desktop-down {
+    padding-left: $nz-footer-indicator-horizontal-padding-medium;
+    padding-right: $nz-footer-indicator-horizontal-padding-medium;
+  }
+
+  @include for-tablet-portrait-down {
+    font-size: $text-font-size-medium;
+  }
+
+  /* Small devices */
+  @include for-phone-only {
+    font-size: $text-font-size-small;
+
+    padding-left: $nz-footer-indicator-horizontal-padding-small;
+    padding-right: $nz-footer-indicator-horizontal-padding-small;
+  }
+}

package/lib/cjs/appui-react/layout/footer/Popup.d.ts

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Popup.scss";
+import * as React from "react";
+import type { PopupProps } from "@itwin/core-react";
+/** Popup component used in [[Footer]] component.
+ * @note Use `popup` prop of [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+export declare function FooterPopup(props: Partial<PopupProps>): React.JSX.Element;
+//# sourceMappingURL=Popup.d.ts.map

package/lib/cjs/appui-react/layout/footer/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Popup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,qBAWrD"}

package/lib/cjs/appui-react/layout/footer/Popup.js

@@ -0,0 +1,25 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Footer
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterPopup = void 0;
+require("./Popup.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+/** Popup component used in [[Footer]] component.
+ * @note Use `popup` prop of [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+function FooterPopup(props) {
+    const { className, ...other } = props;
+    return (React.createElement(core_react_1.Popup, { className: (0, classnames_1.default)("nz-footer-popup", className), position: appui_abstract_1.RelativePosition.Top, showArrow: true, showShadow: true, ...other }));
+}
+exports.FooterPopup = FooterPopup;
+//# sourceMappingURL=Popup.js.map

package/lib/cjs/appui-react/layout/footer/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Popup.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,wBAAsB;AACtB,2CAAoC;AACpC,+BAA+B;AAC/B,0DAAyD;AAEzD,kDAA0C;AAE1C;;;GAGG;AACH,SAAgB,WAAW,CAAC,KAA0B;IACpD,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACtC,OAAO,CACL,oBAAC,kBAAK,IACJ,SAAS,EAAE,IAAA,oBAAU,EAAC,iBAAiB,EAAE,SAAS,CAAC,EACnD,QAAQ,EAAE,iCAAgB,CAAC,GAAG,EAC9B,SAAS,QACT,UAAU,EAAE,IAAI,KACZ,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAXD,kCAWC","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 Footer\n */\n\nimport \"./Popup.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { PopupProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\n\n/** Popup component used in [[Footer]] component.\n * @note Use `popup` prop of [StatusBarIndicator]($appui-react) instead\n * @internal\n */\nexport function FooterPopup(props: Partial<PopupProps>) {\n  const { className, ...other } = props;\n  return (\n    <Popup\n      className={classnames(\"nz-footer-popup\", className)}\n      position={RelativePosition.Top}\n      showArrow\n      showShadow={true}\n      {...other}\n    />\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/footer/Popup.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/index";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "variables";
+
+.nz-footer-popup {
+  font-size: var(--iui-font-size-1);
+  background-color: var(--iui-color-background);
+
+  &.core-popup.arrow::after,
+  &.core-popup.arrow::before {
+    color: var(--iui-color-background);
+  }
+
+  @include uicore-z-index(status-popup);
+}

package/lib/cjs/appui-react/layout/footer/_variables.scss

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$footer-height: 40px;
+
+$text-font-size: 14px;
+$text-font-size-medium: 12px;
+$text-font-size-small: 12px;
+
+$icon-size: 16px;
+$icon-size-medium: 14px;
+$icon-size-small: 14px;
+$icon-color: var(--iui-color-icon);
+$icon-shadow: drop-shadow(0 1px $buic-icon-color-reverse);
+
+$space-between-text-and-icon: 12px;
+$space-between-icons: 20px;
+
+$balloon-padding: 3px;
+$min-balloon-height: $icon-size - 2 * $balloon-padding;
+$min-balloon-width: $min-balloon-height;
+$balloon-arrow-width: 10px;
+$balloon-arrow-height: 10px;
+
+$nz-footer-popup-min-width: 300px;
+$nz-footer-popup-max-width: 600px;
+
+// Footer indicator
+$nz-footer-indicator-horizontal-padding: 15px;
+$nz-footer-indicator-horizontal-padding-medium: 10px;
+$nz-footer-indicator-horizontal-padding-small: 5px;
+
+$nz-footer-indicator-vertical-padding: 3px;
+
+// Footer indicator in widget mode
+$nz-footer-widget-indicator-horizontal-padding: 5px;
+$nz-footer-widget-indicator-horizontal-padding-medium: 3px;
+$nz-footer-widget-indicator-horizontal-padding-small: 2px;
+
+$nz-footer-indicator-space-between-text-and-icon: 4px;

package/lib/cjs/appui-react/layout/footer/dialog/Button.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Message
+ */
+import "./Button.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[TitleBarButton]] component.
+ * @internal
+ */
+export interface TitleBarButtonProps extends CommonProps {
+    /** Button content. */
+    children?: React.ReactNode;
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Button title. */
+    title?: string;
+}
+/** Button used in [[TitleBar]] component.
+ * @note Use [StatusBarDialog.TitleBarButton]($appui-react) instead
+ * @internal
+ */
+export declare function TitleBarButton(props: TitleBarButtonProps): React.JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/lib/cjs/appui-react/layout/footer/dialog/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAgBxD"}

package/lib/cjs/appui-react/layout/footer/dialog/Button.js

@@ -0,0 +1,25 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Message
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBarButton = void 0;
+require("./Button.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Button used in [[TitleBar]] component.
+ * @note Use [StatusBarDialog.TitleBarButton]($appui-react) instead
+ * @internal
+ */
+function TitleBarButton(props) {
+    const className = (0, classnames_1.default)("nz-footer-dialog-button", props.className);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { className: className, onClick: props.onClick, style: props.style, title: props.title, role: "button", tabIndex: -1 }, props.children));
+}
+exports.TitleBarButton = TitleBarButton;
+//# sourceMappingURL=Button.js.map

package/lib/cjs/appui-react/layout/footer/dialog/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Button.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAe/B;;;GAGG;AACH,SAAgB,cAAc,CAAC,KAA0B;IACvD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEzE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,IAEX,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAhBD,wCAgBC","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 Message\n */\n\nimport \"./Button.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[TitleBarButton]] component.\n * @internal\n */\nexport interface TitleBarButtonProps extends CommonProps {\n  /** Button content. */\n  children?: React.ReactNode;\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Button title. */\n  title?: string;\n}\n\n/** Button used in [[TitleBar]] component.\n * @note Use [StatusBarDialog.TitleBarButton]($appui-react) instead\n * @internal\n */\nexport function TitleBarButton(props: TitleBarButtonProps) {\n  const className = classnames(\"nz-footer-dialog-button\", props.className);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <div\n      className={className}\n      onClick={props.onClick}\n      style={props.style}\n      title={props.title}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/footer/dialog/Button.scss

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.nz-footer-dialog-button {
+  color: var(--iui-color-text-muted);
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    color: var(--iui-color-text-hover);
+  }
+
+  &:active {
+    color: var(--iui-color-text-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/cjs/appui-react/layout/footer/dialog/Dialog.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Message
+ */
+import "./Dialog.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[Dialog]] component.
+ * @internal
+ */
+export interface DialogProps extends CommonProps {
+    /** Dialog content.  */
+    children?: React.ReactNode;
+    /** Dialog title bar. See [[TitleBar]] */
+    titleBar?: React.ReactNode;
+}
+/** Dialog used in footer indicators.
+ * @note See [[MessageCenter]], [[ToolAssistance]]
+ * @note Use [StatusBarDialog]($appui-react) instead
+ * @internal
+ */
+export declare function Dialog(props: DialogProps): React.JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/cjs/appui-react/layout/footer/dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBASxC"}

package/lib/cjs/appui-react/layout/footer/dialog/Dialog.js

@@ -0,0 +1,26 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Message
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+require("./Dialog.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Dialog used in footer indicators.
+ * @note See [[MessageCenter]], [[ToolAssistance]]
+ * @note Use [StatusBarDialog]($appui-react) instead
+ * @internal
+ */
+function Dialog(props) {
+    const className = (0, classnames_1.default)("nz-footer-dialog-dialog", props.className);
+    return (React.createElement("div", { className: className, style: props.style },
+        React.createElement("div", null, props.titleBar),
+        React.createElement("div", null, props.children)));
+}
+exports.Dialog = Dialog;
+//# sourceMappingURL=Dialog.js.map

package/lib/cjs/appui-react/layout/footer/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Dialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAa/B;;;;GAIG;AACH,SAAgB,MAAM,CAAC,KAAkB;IACvC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC3B,iCAAM,KAAK,CAAC,QAAQ,CAAO,CACvB,CACP,CAAC;AACJ,CAAC;AATD,wBASC","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 Message\n */\n\nimport \"./Dialog.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Dialog]] component.\n * @internal\n */\nexport interface DialogProps extends CommonProps {\n  /** Dialog content.  */\n  children?: React.ReactNode;\n  /** Dialog title bar. See [[TitleBar]] */\n  titleBar?: React.ReactNode;\n}\n\n/** Dialog used in footer indicators.\n * @note See [[MessageCenter]], [[ToolAssistance]]\n * @note Use [StatusBarDialog]($appui-react) instead\n * @internal\n */\nexport function Dialog(props: DialogProps) {\n  const className = classnames(\"nz-footer-dialog-dialog\", props.className);\n\n  return (\n    <div className={className} style={props.style}>\n      <div>{props.titleBar}</div>\n      <div>{props.children}</div>\n    </div>\n  );\n}\n"]}