@itwin/appui-react 4.8.3 → 4.9.0

package/lib/esm/appui-react/layout/footer/message-center/Dialog.scss

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "../../scrollbar";
+@import "../variables";
+@import "variables";
+
+.nz-footer-messageCenter-dialog {
+  width: 16vw;
+  min-width: $nz-footer-popup-min-width;
+  max-width: $nz-footer-popup-max-width;
+
+  > div:last-child {
+    > .nz-tabs {
+      min-width: 100%;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+    }
+
+    > .nz-messages {
+      max-height: 280px;
+      min-height: $nz-message-horizontal-padding;
+      overflow: auto;
+
+      @include nz-scrollbar();
+    }
+
+    > .nz-gradient {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 8px;
+      padding-right: $nz-scrollbar-width;
+      box-sizing: border-box;
+
+      &:after {
+        content: "";
+        display: block;
+        background: linear-gradient(
+          hsl(var(--iui-color-background-hsl) / 0),
+          hsl(var(--iui-color-background-hsl) / 1)
+        );
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    > .nz-message-prompt {
+      display: none;
+      text-align: center;
+      margin: 30px 15px;
+      font-style: italic;
+      color: var(--iui-color-text-muted);
+    }
+
+    & .nz-messages:empty ~ .nz-message-prompt {
+      display: block;
+    }
+  }
+}

package/lib/esm/appui-react/layout/footer/message-center/Indicator.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import type { FooterIndicatorProps } from "../Indicator";
+/** Properties of [[MessageCenter]] component.
+ * @internal
+ */
+export interface MessageCenterProps extends FooterIndicatorProps {
+    /** Message center balloon content. */
+    children?: string;
+    /** Clickable part of the indicator. */
+    indicatorRef?: React.Ref<HTMLDivElement>;
+    /** Message center label. */
+    label?: string;
+    /** Function called when indicator is clicked. */
+    onClick?: () => void;
+    /** Message center dialog target. */
+    targetRef?: React.Ref<HTMLDivElement>;
+}
+/** Message center indicator used in [[Footer]] component.
+ * @note Used with [[MessageCenterDialog]] component.
+ * @internal
+ */
+export declare class MessageCenter extends React.PureComponent<MessageCenterProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Indicator.d.ts.map

package/lib/esm/appui-react/layout/footer/message-center/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGzD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACvC;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxD,MAAM;CAkCvB"}

package/lib/esm/appui-react/layout/footer/message-center/Indicator.js

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Indicator.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { FooterIndicator } from "../Indicator";
+/** Message center indicator used in [[Footer]] component.
+ * @note Used with [[MessageCenterDialog]] component.
+ * @internal
+ */
+export class MessageCenter extends React.PureComponent {
+    render() {
+        const { children, className, indicatorRef, label, onClick, targetRef, ...props } = this.props;
+        return (React.createElement(FooterIndicator, { className: classnames("nz-footer-messageCenter-indicator", className), ...props },
+            React.createElement("div", { className: "nz-indicator", onClick: onClick, ref: indicatorRef, role: "button", tabIndex: -1 },
+                label !== undefined && React.createElement("span", { className: "nz-label" }, label),
+                React.createElement("div", { className: "nz-container" },
+                    React.createElement("div", { className: "nz-balloon" },
+                        React.createElement("div", { className: "nz-arrow" }),
+                        React.createElement("div", { className: "nz-content" }, children)),
+                    React.createElement("div", { className: "nz-target", ref: targetRef })))));
+    }
+}
+//# sourceMappingURL=Indicator.js.map

package/lib/esm/appui-react/layout/footer/message-center/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Indicator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAkB/C;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,mCAAmC,EAAE,SAAS,CAAC,KACjE,KAAK;YAET,6BACE,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC;gBAEX,KAAK,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAQ;gBACjE,6BAAK,SAAS,EAAC,cAAc;oBAC3B,6BAAK,SAAS,EAAC,YAAY;wBACzB,6BAAK,SAAS,EAAC,UAAU,GAAG;wBAC5B,6BAAK,SAAS,EAAC,YAAY,IAAE,QAAQ,CAAO,CACxC;oBACN,6BAAK,SAAS,EAAC,WAAW,EAAC,GAAG,EAAE,SAAS,GAAI,CACzC,CACF,CACU,CACnB,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 MessageCenter\n */\n\nimport \"./Indicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { FooterIndicatorProps } from \"../Indicator\";\nimport { FooterIndicator } from \"../Indicator\";\n\n/** Properties of [[MessageCenter]] component.\n * @internal\n */\nexport interface MessageCenterProps extends FooterIndicatorProps {\n  /** Message center balloon content. */\n  children?: string;\n  /** Clickable part of the indicator. */\n  indicatorRef?: React.Ref<HTMLDivElement>;\n  /** Message center label. */\n  label?: string;\n  /** Function called when indicator is clicked. */\n  onClick?: () => void;\n  /** Message center dialog target. */\n  targetRef?: React.Ref<HTMLDivElement>;\n}\n\n/** Message center indicator used in [[Footer]] component.\n * @note Used with [[MessageCenterDialog]] component.\n * @internal\n */\nexport class MessageCenter extends React.PureComponent<MessageCenterProps> {\n  public override render() {\n    const {\n      children,\n      className,\n      indicatorRef,\n      label,\n      onClick,\n      targetRef,\n      ...props\n    } = this.props;\n    return (\n      <FooterIndicator\n        className={classnames(\"nz-footer-messageCenter-indicator\", className)}\n        {...props}\n      >\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events\n          className=\"nz-indicator\"\n          onClick={onClick}\n          ref={indicatorRef}\n          role=\"button\"\n          tabIndex={-1}\n        >\n          {label !== undefined && <span className=\"nz-label\">{label}</span>}\n          <div className=\"nz-container\">\n            <div className=\"nz-balloon\">\n              <div className=\"nz-arrow\" />\n              <div className=\"nz-content\">{children}</div>\n            </div>\n            <div className=\"nz-target\" ref={targetRef} />\n          </div>\n        </div>\n      </FooterIndicator>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/message-center/Indicator.scss

@@ -0,0 +1,106 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/breakpoints";
+@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+@import "../variables";
+
+.nz-footer-messageCenter-indicator {
+  height: 100%;
+  color: var(--iui-color-text);
+
+  padding: {
+    top: 0;
+    bottom: 0;
+  }
+
+  box-sizing: border-box;
+
+  > .nz-indicator {
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+
+    > .nz-label {
+      font-size: $text-font-size;
+      font-size: $text-font-size;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @include for-tablet-portrait-down {
+        font-size: $text-font-size-medium;
+      }
+
+      @include for-phone-only {
+        display: none;
+      }
+    }
+
+    > .nz-container {
+      height: 100%;
+      position: relative;
+      display: grid;
+      align-items: center;
+      margin-left: 8px;
+
+      > .nz-balloon {
+        background-color: var(--iui-color-icon);
+        text-align: center;
+        min-width: $min-balloon-width;
+        min-height: $min-balloon-height;
+        border-radius: 50%;
+        padding: $balloon-padding;
+        position: relative;
+
+        > .nz-arrow {
+          position: absolute;
+          width: 0;
+          bottom: -3px;
+          left: 0;
+          display: block;
+          border-width: 0;
+          border-bottom-width: $balloon-arrow-height;
+          border-left-width: $balloon-arrow-width;
+          border-style: solid;
+          border-color: transparent var(--iui-color-icon);
+          transform: rotate(25deg);
+        }
+
+        > .nz-content {
+          position: relative;
+          color: var(--iui-color-background);
+          line-height: $min-balloon-height;
+          font-size: 11px;
+        }
+      }
+
+      > .nz-target {
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+    }
+
+    &:hover {
+      color: var(--iui-color-text-accent);
+
+      > .nz-container > .nz-balloon {
+        background-color: var(--iui-color-text-accent);
+
+        > .nz-arrow {
+          border-color: transparent var(--iui-color-text-accent);
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/esm/appui-react/layout/footer/message-center/Message.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Message.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[MessageCenterMessage]] component.
+ * @internal
+ */
+export interface MessageCenterMessageProps extends CommonProps {
+    /** Message content. */
+    children?: React.ReactNode;
+    /** Message icon. */
+    icon?: React.ReactNode;
+}
+/** Message entry in [[MessageCenterDialog]] component.
+ * @internal
+ */
+export declare class MessageCenterMessage extends React.PureComponent<MessageCenterMessageProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Message.d.ts.map

package/lib/esm/appui-react/layout/footer/message-center/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Message.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC;IACtE,MAAM;CAevB"}

package/lib/esm/appui-react/layout/footer/message-center/Message.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Message.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Message entry in [[MessageCenterDialog]] component.
+ * @internal
+ */
+export class MessageCenterMessage extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-messageCenter-message", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            this.props.icon && React.createElement("div", { className: "nz-icon" }, this.props.icon),
+            this.props.children && (React.createElement("div", { className: "nz-content" }, this.props.children))));
+    }
+}
+//# sourceMappingURL=Message.js.map

package/lib/esm/appui-react/layout/footer/message-center/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Message.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,aAAwC;IACtE,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,iCAAiC,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC/C,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO;YACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACtB,6BAAK,SAAS,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACxD,CACG,CACP,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 MessageCenter\n */\n\nimport \"./Message.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[MessageCenterMessage]] component.\n * @internal\n */\nexport interface MessageCenterMessageProps extends CommonProps {\n  /** Message content. */\n  children?: React.ReactNode;\n  /** Message icon. */\n  icon?: React.ReactNode;\n}\n\n/** Message entry in [[MessageCenterDialog]] component.\n * @internal\n */\nexport class MessageCenterMessage extends React.PureComponent<MessageCenterMessageProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-messageCenter-message\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        {this.props.icon && <div className=\"nz-icon\">{this.props.icon}</div>}\n        {this.props.children && (\n          <div className=\"nz-content\">{this.props.children}</div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/message-center/Message.scss

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+@import "variables";
+@import "../variables";
+
+.nz-footer-messageCenter-message {
+  $vertical-padding: $nz-message-horizontal-padding;
+
+  min-height: 48px;
+  box-sizing: border-box;
+  margin-left: $nz-message-horizontal-padding;
+  margin-right: $nz-message-horizontal-padding;
+  padding-left: $nz-message-horizontal-padding;
+  padding-right: $nz-message-horizontal-padding;
+  padding-top: $vertical-padding;
+  padding-bottom: $vertical-padding;
+  display: grid;
+  grid-gap: 12px;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  line-height: 16px;
+  color: var(--iui-color-text);
+  font-size: $text-font-size;
+
+  &:not(:first-child) {
+    border-top: 1px solid $buic-background-4;
+  }
+
+  > .nz-icon {
+    min-width: 20px;
+  }
+
+  > .nz-content {
+    overflow: hidden;
+    overflow-wrap: break-word;
+  }
+}

package/lib/esm/appui-react/layout/footer/message-center/Tab.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Tab.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[MessageCenterTab]] component.
+ * @internal
+ */
+export interface MessageCenterTabProps extends CommonProps {
+    /** Tab content. */
+    children?: React.ReactNode;
+    /** Describes if the tab is active. */
+    isActive?: boolean;
+    /** Function called when the tab is clicked. */
+    onClick?: () => void;
+}
+/** Message center tab used in [[MessageCenterDialog]] component.
+ * @internal
+ */
+export declare class MessageCenterTab extends React.PureComponent<MessageCenterTabProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Tab.d.ts.map

package/lib/esm/appui-react/layout/footer/message-center/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Tab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,mBAAmB;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;CAoBvB"}

package/lib/esm/appui-react/layout/footer/message-center/Tab.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Tab.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Message center tab used in [[MessageCenterDialog]] component.
+ * @internal
+ */
+export class MessageCenterTab extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-messageCenter-tab", this.props.isActive && "nz-active", this.props.className);
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: className, style: this.props.style, onClick: this.props.onClick, role: "tab", tabIndex: -1 }, this.props.children));
+    }
+}
+//# sourceMappingURL=Tab.js.map

package/lib/esm/appui-react/layout/footer/message-center/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Tab.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,6BAA6B,EAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,EAClC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO;QACL,iEAAiE;QACjE,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,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 MessageCenter\n */\n\nimport \"./Tab.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[MessageCenterTab]] component.\n * @internal\n */\nexport interface MessageCenterTabProps extends CommonProps {\n  /** Tab content. */\n  children?: React.ReactNode;\n  /** Describes if the tab is active. */\n  isActive?: boolean;\n  /** Function called when the tab is clicked. */\n  onClick?: () => void;\n}\n\n/** Message center tab used in [[MessageCenterDialog]] component.\n * @internal\n */\nexport class MessageCenterTab extends React.PureComponent<MessageCenterTabProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-messageCenter-tab\",\n      this.props.isActive && \"nz-active\",\n      this.props.className\n    );\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        className={className}\n        style={this.props.style}\n        onClick={this.props.onClick}\n        role=\"tab\"\n        tabIndex={-1}\n      >\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/message-center/Tab.scss

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/geometry";
+@import "~@itwin/core-react/lib/cjs/core-react/typography";
+
+@mixin nz-tab-bar {
+  $bar-size: 2px;
+
+  &:after {
+    content: "";
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    top: $bar-size;
+    left: 0;
+    background: var(--iui-color-text-accent);
+    padding-left: $bar-size;
+    padding-right: $bar-size;
+    box-sizing: border-box;
+    background-clip: content-box;
+  }
+}
+
+.nz-footer-messageCenter-tab {
+  min-width: 40px;
+  min-height: 38px;
+  box-sizing: border-box;
+  cursor: pointer;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--iui-color-text);
+
+  &:not(.nz-active) {
+    border-bottom: 1px solid var(--iui-color-border);
+    background-color: var(--iui-color-background-backdrop);
+  }
+
+  &:hover {
+    @include nz-tab-bar;
+  }
+
+  &.nz-active {
+    color: var(--iui-color-text-accent);
+
+    @include nz-tab-bar;
+  }
+
+  &:not(:first-child) {
+    border-left: 1px solid var(--iui-color-border);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/esm/appui-react/layout/footer/message-center/_variables.scss

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$nz-message-horizontal-padding: 8px;

package/lib/esm/appui-react/layout/footer/snap-mode/Indicator.d.ts

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module SnapMode
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import type { FooterIndicatorProps } from "../Indicator";
+/** Properties of [[SnapMode]] component.
+ * @internal
+ */
+export interface SnapModeProps extends FooterIndicatorProps {
+    /** Indicator label. */
+    children?: string;
+    /** Indicator icon. */
+    icon?: React.ReactNode;
+    /** Clickable part of the indicator. */
+    indicatorRef?: React.Ref<HTMLDivElement>;
+    /** Function called when indicator is clicked. */
+    onClick?: () => void;
+}
+/** Snap mode indicator used in [[Footer]] component. Used with [[SnapModePanel]] component.
+ * @note Use [SnapModeField]($appui-react) instead
+ * @internal
+ */
+export declare class SnapMode extends React.PureComponent<SnapModeProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Indicator.d.ts.map

package/lib/esm/appui-react/layout/footer/snap-mode/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/snap-mode/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGzD;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAC9C,MAAM;CAuBvB"}

package/lib/esm/appui-react/layout/footer/snap-mode/Indicator.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SnapMode
+ */
+import "./Indicator.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { FooterIndicator } from "../Indicator";
+/** Snap mode indicator used in [[Footer]] component. Used with [[SnapModePanel]] component.
+ * @note Use [SnapModeField]($appui-react) instead
+ * @internal
+ */
+export class SnapMode extends React.PureComponent {
+    render() {
+        const { children, className, icon, indicatorRef, onClick, ...props } = this.props;
+        return (React.createElement(FooterIndicator, { className: classnames("nz-footer-snapMode-indicator", className), ...props },
+            React.createElement("div", { className: "nz-indicator", onClick: onClick, ref: indicatorRef, role: "button", tabIndex: -1 },
+                children !== undefined && (React.createElement("span", { className: "nz-label" }, children)),
+                React.createElement("div", { className: "nz-icon" }, icon))));
+    }
+}
+//# sourceMappingURL=Indicator.js.map

package/lib/esm/appui-react/layout/footer/snap-mode/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/snap-mode/Indicator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAgB/C;;;GAGG;AACH,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,aAA4B;IAC9C,MAAM;QACpB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAClE,IAAI,CAAC,KAAK,CAAC;QACb,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,8BAA8B,EAAE,SAAS,CAAC,KAC5D,KAAK;YAET,6BACE,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC;gBAEX,QAAQ,KAAK,SAAS,IAAI,CACzB,8BAAM,SAAS,EAAC,UAAU,IAAE,QAAQ,CAAQ,CAC7C;gBACD,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAO,CACjC,CACU,CACnB,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 SnapMode\n */\n\nimport \"./Indicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { FooterIndicatorProps } from \"../Indicator\";\nimport { FooterIndicator } from \"../Indicator\";\n\n/** Properties of [[SnapMode]] component.\n * @internal\n */\nexport interface SnapModeProps extends FooterIndicatorProps {\n  /** Indicator label. */\n  children?: string;\n  /** Indicator icon. */\n  icon?: React.ReactNode;\n  /** Clickable part of the indicator. */\n  indicatorRef?: React.Ref<HTMLDivElement>;\n  /** Function called when indicator is clicked. */\n  onClick?: () => void;\n}\n\n/** Snap mode indicator used in [[Footer]] component. Used with [[SnapModePanel]] component.\n * @note Use [SnapModeField]($appui-react) instead\n * @internal\n */\nexport class SnapMode extends React.PureComponent<SnapModeProps> {\n  public override render() {\n    const { children, className, icon, indicatorRef, onClick, ...props } =\n      this.props;\n    return (\n      <FooterIndicator\n        className={classnames(\"nz-footer-snapMode-indicator\", className)}\n        {...props}\n      >\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events\n          className=\"nz-indicator\"\n          onClick={onClick}\n          ref={indicatorRef}\n          role=\"button\"\n          tabIndex={-1}\n        >\n          {children !== undefined && (\n            <span className=\"nz-label\">{children}</span>\n          )}\n          <div className=\"nz-icon\">{icon}</div>\n        </div>\n      </FooterIndicator>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/footer/snap-mode/Indicator.scss

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-snapMode-indicator {
+  height: 100%;
+  overflow: hidden;
+
+  > .nz-indicator {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    > nz-label {
+      margin-right: 6px;
+      font-size: $text-font-size;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @include for-tablet-landscape-down {
+        display: none;
+      }
+    }
+
+    > .nz-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    &:hover {
+      color: var(--iui-color-text-accent-hover);
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module SnapMode
+ */
+import "./Panel.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[SnapModePanel]] component.
+ * @internal
+ */
+export interface SnapModePanelProps extends CommonProps {
+    /** Snap rows. I.e. [[Snap]] */
+    children?: React.ReactNode;
+    /** Dialog title. */
+    title?: string;
+}
+/** Snap mode panel used with [[SnapMode]] component.
+ * @note This is a presentational component and should be aligned with [[SnapMode]] component.
+ * I.e. use [[FooterPopup]] to handle alignment.
+ * @internal
+ */
+export declare class SnapModePanel extends React.PureComponent<SnapModePanelProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Panel.d.ts.map

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/snap-mode/Panel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxD,MAAM;CAavB"}

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SnapMode
+ */
+import "./Panel.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { TitleBar } from "../dialog/TitleBar";
+/** Snap mode panel used with [[SnapMode]] component.
+ * @note This is a presentational component and should be aligned with [[SnapMode]] component.
+ * I.e. use [[FooterPopup]] to handle alignment.
+ * @internal
+ */
+export class SnapModePanel extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-snapMode-panel", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            React.createElement(TitleBar, { title: this.props.title }),
+            React.createElement("div", { className: "nz-snaps" }, this.props.children)));
+    }
+}
+//# sourceMappingURL=Panel.js.map

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/snap-mode/Panel.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAY9C;;;;GAIG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,0BAA0B,EAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,oBAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI;YACrC,6BAAK,SAAS,EAAC,UAAU,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACjD,CACP,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 SnapMode\n */\n\nimport \"./Panel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { TitleBar } from \"../dialog/TitleBar\";\n\n/** Properties of [[SnapModePanel]] component.\n * @internal\n */\nexport interface SnapModePanelProps extends CommonProps {\n  /** Snap rows. I.e. [[Snap]] */\n  children?: React.ReactNode;\n  /** Dialog title. */\n  title?: string;\n}\n\n/** Snap mode panel used with [[SnapMode]] component.\n * @note This is a presentational component and should be aligned with [[SnapMode]] component.\n * I.e. use [[FooterPopup]] to handle alignment.\n * @internal\n */\nexport class SnapModePanel extends React.PureComponent<SnapModePanelProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-snapMode-panel\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        <TitleBar title={this.props.title} />\n        <div className=\"nz-snaps\">{this.props.children}</div>\n      </div>\n    );\n  }\n}\n"]}