@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/cjs/appui-react/statusfields/FooterModeField.js

@@ -0,0 +1,28 @@
+"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 StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterModeField = void 0;
+const React = require("react");
+const StatusBar_1 = require("../statusbar/StatusBar");
+const ConditionalField_1 = require("./ConditionalField");
+/**
+ * A component that renders its children if the StatusBar is in Footer mode.
+ * @public
+ * @deprecated in 3.3. In upcoming version, widget mode will be removed, in footer mode will always be true, making this component useless.
+ */
+function FooterModeField(props) {
+    const { children, ...otherProps } = props;
+    const statusBarContext = React.useContext(StatusBar_1.StatusBarContext);
+    const conditionProps = { ...statusBarContext, ...otherProps };
+    return (
+    // eslint-disable-next-line deprecation/deprecation
+    React.createElement(ConditionalField_1.ConditionalField, { ...conditionProps, boolFunc: (innerProps) => innerProps.isInFooterMode }, (isInFooterMode) => isInFooterMode && children));
+}
+exports.FooterModeField = FooterModeField;
+//# sourceMappingURL=FooterModeField.js.map

package/lib/cjs/appui-react/statusfields/FooterModeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterModeField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/FooterModeField.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,sDAA0D;AAC1D,yDAAsD;AAWtD;;;;GAIG;AACH,SAAgB,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAY,CAAC;IACjD,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,4BAAgB,CAAC,CAAC;IAC5D,MAAM,cAAc,GAAG,EAAC,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAC,CAAC;IAE5D,OAAO;IACP,mDAAmD;IACjD,oBAAC,mCAAgB,OAAK,cAAc,EAAE,QAAQ,EAAE,CAAC,UAAU,EAAW,EAAE,CAAC,UAAU,CAAC,cAAc,IAC/F,CAAC,cAAuB,EAAE,EAAE,CAAC,cAAc,IAAI,QAAQ,CACvC,CACpB,CAAC;AACJ,CAAC;AAXD,0CAWC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { StatusBarContext } from \"../statusbar/StatusBar\";\r\nimport { ConditionalField } from \"./ConditionalField\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Properties for a FooterModeField component\r\n * @public\r\n */\r\nexport interface FooterModeFieldProps extends StatusFieldProps {\r\n  /** Field content. */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A component that renders its children if the StatusBar is in Footer mode.\r\n * @public\r\n * @deprecated in 3.3. In upcoming version, widget mode will be removed, in footer mode will always be true, making this component useless.\r\n */\r\nexport function FooterModeField(props: FooterModeFieldProps) {\r\n  const { children, ...otherProps } = props as any;\r\n  const statusBarContext = React.useContext(StatusBarContext);\r\n  const conditionProps = {...statusBarContext, ...otherProps};\r\n\r\n  return (\r\n  // eslint-disable-next-line deprecation/deprecation\r\n    <ConditionalField {...conditionProps} boolFunc={(innerProps): boolean => innerProps.isInFooterMode} >\r\n      {(isInFooterMode: boolean) => isInFooterMode && children}\r\n    </ConditionalField>\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/statusfields/Indicator.d.ts

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import { StatusBarLabelSide } from "@itwin/appui-abstract";
+import { CommonProps, IconSpec } from "@itwin/core-react";
+import { FooterPopupContentType } from "@itwin/appui-layout-react";
+/** Properties of [[Indicator]] component. */
+interface IndicatorProps extends CommonProps {
+    /** Label of balloon icon. @deprecated in 3.0. use label */
+    balloonLabel?: string;
+    /** Dialog to display in popup when indicator is clicked. */
+    dialog?: React.ReactChild;
+    /** Icon to use in the footer. @deprecated in 3.0. use iconSpec */
+    iconName?: string;
+    /** specification for Icon, overrides iconName specification */
+    iconSpec?: IconSpec;
+    /** Describes if the indicator label is visible. */
+    isLabelVisible?: boolean;
+    /** Indicator label. */
+    label?: string;
+    /** Side to display label. */
+    labelSide?: StatusBarLabelSide;
+    /** Function called when indicator is clicked. */
+    onClick?: () => void;
+    /** If dialog prop is set, used to determine initial state. */
+    opened?: boolean;
+    /** Describes whether the footer is in footer or widget mode.
+     * @deprecated in 3.3. In upcoming version, widget mode will be removed. Consider this parameter to always be true.
+    */
+    isInFooterMode?: boolean;
+    /** Tooltip text if not specified label is used */
+    toolTip?: string;
+    /** ContentType is used to determine color of popup arrow. If not set defaults to FooterPopupContentType.Dialog */
+    contentType?: FooterPopupContentType;
+}
+/** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.
+ * @deprecated in 3.6. Use [[StatusBarIndicator]] or [[StatusBarLabelIndicator]] instead.
+ * @beta
+ */
+export declare function Indicator(props: IndicatorProps): JSX.Element;
+export {};
+//# sourceMappingURL=Indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA0B,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAQ,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAe,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEhF,6CAA6C;AAC7C,UAAU,cAAe,SAAQ,WAAW;IAC1C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IAC1B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;MAEE;IACF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kHAAkH;IAClH,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA0C9C"}

package/lib/cjs/appui-react/statusfields/Indicator.js

@@ -0,0 +1,46 @@
+"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 StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Indicator = void 0;
+require("./Indicator.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");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+/** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.
+ * @deprecated in 3.6. Use [[StatusBarIndicator]] or [[StatusBarLabelIndicator]] instead.
+ * @beta
+ */
+function Indicator(props) {
+    // eslint-disable-next-line deprecation/deprecation
+    const { className, contentType, dialog, iconName, iconSpec, isInFooterMode, isLabelVisible, label, labelSide, onClick, opened, style, toolTip } = props;
+    const hasClickAction = React.useMemo(() => !!onClick || !!dialog, [dialog, onClick]);
+    const [isOpen, setIsOpen] = React.useState(!!opened);
+    const handleOnIndicatorClick = React.useCallback(() => {
+        if (dialog) {
+            setIsOpen(!isOpen);
+        }
+        onClick && onClick();
+    }, [dialog, isOpen, onClick]);
+    const inFooter = React.useMemo(() => false === isInFooterMode ? false : true, [isInFooterMode]);
+    const target = React.useRef(null);
+    const icon = React.useMemo(() => iconSpec !== null && iconSpec !== void 0 ? iconSpec : iconName, [iconSpec, iconName]);
+    const title = React.useMemo(() => toolTip !== null && toolTip !== void 0 ? toolTip : label, [toolTip, label]);
+    const classNames = (0, classnames_1.default)("uifw-footer-label-left", "uifw-footer-indicator", inFooter && "nz-footer-mode", hasClickAction && "uifw-footer-action", labelSide === appui_abstract_1.StatusBarLabelSide.Right && "uifw-footer-label-reversed", // eslint-disable-line deprecation/deprecation
+    className);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: target, role: "button", tabIndex: -1, className: classNames, title: title, style: style, onClick: handleOnIndicatorClick },
+            isLabelVisible && label && React.createElement("span", { className: "nz-label" }, appui_abstract_1.ConditionalStringValue.getValue(label)),
+            icon && React.createElement("div", { className: "uifw-indicator-icon" },
+                React.createElement(core_react_1.Icon, { iconSpec: icon }))),
+        dialog && React.createElement(appui_layout_react_1.FooterPopup, { contentType: contentType, target: target.current, onClose: () => setIsOpen(false), isOpen: isOpen }, dialog)));
+}
+exports.Indicator = Indicator;
+//# sourceMappingURL=Indicator.js.map

package/lib/cjs/appui-react/statusfields/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/Indicator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAC/B,0DAAmF;AACnF,kDAAgE;AAChE,kEAAgF;AAgChF;;;GAGG;AACH,SAAgB,SAAS,CAAC,KAAqB;IAC7C,mDAAmD;IACnD,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACxJ,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACrF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACrD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpD,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;SACpB;QACD,OAAO,IAAI,OAAO,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAChG,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IACtE,MAAM,UAAU,GAAG,IAAA,oBAAU,EAC3B,wBAAwB,EAAE,uBAAuB,EACjD,QAAQ,IAAI,gBAAgB,EAC5B,cAAc,IAAI,oBAAoB,EACtC,SAAS,KAAK,mCAAkB,CAAC,KAAK,IAAI,4BAA4B,EAAE,8CAA8C;IACtH,SAAS,CAAC,CAAC;IACb,OAAO,CACL;QAEE,6BAAK,GAAG,EAAE,MAAM,EACd,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAC1B,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,sBAAsB;YAE9B,cAAc,IAAI,KAAK,IAAI,8BAAM,SAAS,EAAC,UAAU,IAAE,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAQ;YACrG,IAAI,IAAI,6BAAK,SAAS,EAAC,qBAAqB;gBAAC,oBAAC,iBAAI,IAAC,QAAQ,EAAE,IAAI,GAAI,CAAM,CACxE;QACL,MAAM,IAAI,oBAAC,gCAAW,IAAC,WAAW,EAAE,WAAW,EAC9C,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,IACb,MAAM,CACK,CACb,CACJ,CAAC;AACJ,CAAC;AA1CD,8BA0CC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport \"./Indicator.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ConditionalStringValue, StatusBarLabelSide } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon, IconSpec } from \"@itwin/core-react\";\r\nimport { FooterPopup, FooterPopupContentType } from \"@itwin/appui-layout-react\";\r\n\r\n/** Properties of [[Indicator]] component. */\r\ninterface IndicatorProps extends CommonProps {\r\n  /** Label of balloon icon. @deprecated in 3.0. use label */\r\n  balloonLabel?: string;\r\n  /** Dialog to display in popup when indicator is clicked. */\r\n  dialog?: React.ReactChild;\r\n  /** Icon to use in the footer. @deprecated in 3.0. use iconSpec */\r\n  iconName?: string;\r\n  /** specification for Icon, overrides iconName specification */\r\n  iconSpec?: IconSpec;\r\n  /** Describes if the indicator label is visible. */\r\n  isLabelVisible?: boolean;\r\n  /** Indicator label. */\r\n  label?: string;\r\n  /** Side to display label. */\r\n  labelSide?: StatusBarLabelSide; // eslint-disable-line deprecation/deprecation\r\n  /** Function called when indicator is clicked. */\r\n  onClick?: () => void;\r\n  /** If dialog prop is set, used to determine initial state. */\r\n  opened?: boolean;\r\n  /** Describes whether the footer is in footer or widget mode.\r\n   * @deprecated in 3.3. In upcoming version, widget mode will be removed. Consider this parameter to always be true.\r\n  */\r\n  isInFooterMode?: boolean;\r\n  /** Tooltip text if not specified label is used */\r\n  toolTip?: string;\r\n  /** ContentType is used to determine color of popup arrow. If not set defaults to FooterPopupContentType.Dialog */\r\n  contentType?: FooterPopupContentType; // eslint-disable-line deprecation/deprecation\r\n}\r\n\r\n/** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.\r\n * @deprecated in 3.6. Use [[StatusBarIndicator]] or [[StatusBarLabelIndicator]] instead.\r\n * @beta\r\n */\r\nexport function Indicator(props: IndicatorProps) {\r\n  // eslint-disable-next-line deprecation/deprecation\r\n  const { className, contentType, dialog, iconName, iconSpec, isInFooterMode, isLabelVisible, label, labelSide, onClick, opened, style, toolTip } = props;\r\n  const hasClickAction = React.useMemo(() => !!onClick || !!dialog, [dialog, onClick]);\r\n  const [isOpen, setIsOpen] = React.useState(!!opened);\r\n  const handleOnIndicatorClick = React.useCallback(() => {\r\n    if (dialog) {\r\n      setIsOpen(!isOpen);\r\n    }\r\n    onClick && onClick();\r\n  }, [dialog, isOpen, onClick]);\r\n  const inFooter = React.useMemo(() => false === isInFooterMode ? false : true, [isInFooterMode]);\r\n  const target = React.useRef<HTMLDivElement>(null);\r\n  const icon = React.useMemo(() => iconSpec ?? iconName, [iconSpec, iconName]);\r\n  const title = React.useMemo(() => toolTip ?? label, [toolTip, label]);\r\n  const classNames = classnames(\r\n    \"uifw-footer-label-left\", \"uifw-footer-indicator\",\r\n    inFooter && \"nz-footer-mode\",\r\n    hasClickAction && \"uifw-footer-action\",\r\n    labelSide === StatusBarLabelSide.Right && \"uifw-footer-label-reversed\", // eslint-disable-line deprecation/deprecation\r\n    className);\r\n  return (\r\n    <>\r\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n      <div ref={target}\r\n        role=\"button\" tabIndex={-1}\r\n        className={classNames}\r\n        title={title}\r\n        style={style}\r\n        onClick={handleOnIndicatorClick}\r\n      >\r\n        {isLabelVisible && label && <span className=\"nz-label\">{ConditionalStringValue.getValue(label)}</span>}\r\n        {icon && <div className=\"uifw-indicator-icon\"><Icon iconSpec={icon} /></div>}\r\n      </div>\r\n      {dialog && <FooterPopup contentType={contentType} // eslint-disable-line deprecation/deprecation\r\n        target={target.current}\r\n        onClose={() => setIsOpen(false)}\r\n        isOpen={isOpen}>\r\n        {dialog}\r\n      </FooterPopup>}\r\n    </>\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/statusfields/Indicator.scss

@@ -0,0 +1,183 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+@keyframes uifw-indicator-FadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.5);
+    transform: scale(.5);
+  }
+
+  50% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+  }
+
+  100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 1;
+  }
+}
+
+@keyframes uifw-indicator-FadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.uifw-footer-indicator {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  visibility: visible;
+  color: $buic-foreground-body;
+  gap: 8px;
+
+  &.uifw-footer-action {
+    cursor: pointer;
+
+    &:hover {
+      color: $buic-foreground-primary;
+    }
+  }
+
+  &.uifw-footer-label-reversed {
+    flex-direction: row-reverse;
+  }
+
+  >.nz-label {
+    font-size: $text-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include for-tablet-landscape-down {
+      display: none;
+    }
+  }
+
+  &.uifw-indicator-fade-in {
+    animation: uifw-indicator-FadeIn 1s linear;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.uifw-indicator-fade-out {
+    animation: uifw-indicator-FadeOut 500ms linear;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Desktop */
+  @include for-medium-desktop-up {
+    &.nz-footer-mode {
+      padding-left: $nz-footer-indicator-horizontal-padding;
+      padding-right: $nz-footer-indicator-horizontal-padding;
+    }
+
+    &:not(.nz-footer-mode) {
+      padding-left: $nz-footer-widget-indicator-horizontal-padding;
+      padding-right: $nz-footer-widget-indicator-horizontal-padding;
+    }
+  }
+
+  /* Medium devices (landscape tablets) */
+  @include for-small-desktop-down {
+    padding-left: $nz-footer-indicator-horizontal-padding-medium;
+    padding-right: $nz-footer-indicator-horizontal-padding-medium;
+  }
+
+  /* Medium devices (portrait tablets) */
+  @include for-tablet-portrait-down {
+    font-size: $text-font-size-medium;
+  }
+
+  /* small devices (phones) */
+  @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;
+  }
+
+  >.nz-balloon-container {
+    height: 100%;
+    position: relative;
+    display: grid;
+    align-content: center;
+
+    >.nz-balloon {
+      background-color: $buic-text-color;
+      text-align: center;
+      cursor: pointer;
+      min-width: $min-balloon-width;
+      min-height: $min-balloon-height;
+      border-radius: 50%;
+      padding: $balloon-padding;
+      filter: $icon-shadow;
+      position: relative;
+      align-self: center;
+
+      >.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 $buic-text-color;
+        transform: rotate(25deg);
+      }
+
+      >.nz-content {
+        position: relative;
+        color: #FFFFFF;
+        line-height: $min-balloon-height;
+        font-size: 11px;
+      }
+    }
+
+    >.nz-dialog {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 50%;
+    }
+  }
+}
+
+.uifw-indicator-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $icon-size;
+  width: $icon-size;
+
+  /* Medium devices */
+  @include for-tablet-landscape-down {
+    font-size: $icon-size-medium;
+    width: $icon-size-medium;
+  }
+
+  /* Small devices */
+  @include for-phone-only {
+    font-size: $icon-size-small;
+    width: $icon-size-small;
+
+  }
+
+}

package/lib/cjs/appui-react/statusfields/MessageCenter.d.ts

@@ -1,47 +1,58 @@
-/** @packageDocumentation
- * @module Notification
- */
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Enum for the [[MessageCenterField]] active tab
- * @internal
- */
-declare enum MessageCenterActiveTab {
-    AllMessages = 0,
-    Problems = 1
-}
-/** State for the [[MessageCenterField]] React component
- * @internal
- */
-interface MessageCenterState {
-    activeTab: MessageCenterActiveTab;
-    target: HTMLDivElement | null;
-    messageCount: number;
-    isOpen: boolean;
-}
-/** Message Center Field React component.
- * @public
- */
-export declare class MessageCenterField extends React.Component<CommonProps, MessageCenterState> {
-    private _indicator;
-    private _title;
-    private _unloadMessagesUpdatedHandler?;
-    private _removeOpenMessagesCenterHandler?;
-    constructor(p: CommonProps);
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    private _handleMessagesUpdatedEvent;
-    private _handleOpenMessageCenterEvent;
-    render(): React.ReactNode;
-    private _handleClose;
-    private _handleOutsideClick;
-    private _handleMessageIndicatorClick;
-    private _changeActiveTab;
-    private getMessages;
-    private isProblemStatus;
-    private setIsOpen;
-}
-export {};
+/** @packageDocumentation
+ * @module Notification
+ */
+import * as React from "react";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Enum for the [[MessageCenterField]] active tab
+ * @internal
+ */
+declare enum MessageCenterActiveTab {
+    AllMessages = 0,
+    Problems = 1
+}
+/** State for the [[MessageCenterField]] React component
+ * @internal
+ */
+interface MessageCenterState {
+    activeTab: MessageCenterActiveTab;
+    target: HTMLDivElement | null;
+    messageCount: number;
+    openWidget: string | null;
+}
+/** Properties for withMessageCenterFieldProps HOC.
+ * @public
+ */
+export interface MessageCenterFieldProps extends StatusFieldProps {
+    /** Message center dialog target.
+     * @deprecated in 3.3. Use `MessageManager.registerAnimateOutToElement` to register this ref in the related component.
+    */
+    targetRef?: React.Ref<HTMLElement>;
+}
+/** Message Center Field React component.
+ * @public
+ */
+export declare class MessageCenterField extends React.Component<MessageCenterFieldProps, MessageCenterState> {
+    private _className;
+    private _indicator;
+    private _title;
+    private _unloadMessagesUpdatedHandler?;
+    private _removeOpenMessagesCenterHandler?;
+    constructor(p: MessageCenterFieldProps);
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    private _handleMessagesUpdatedEvent;
+    private _handleOpenMessageCenterEvent;
+    render(): React.ReactNode;
+    private _handleTargetRef;
+    private _handleClose;
+    private _handleOutsideClick;
+    private _handleMessageIndicatorClick;
+    private _changeActiveTab;
+    private getMessages;
+    private isProblemStatus;
+    private setOpenWidget;
+}
+export {};
 //# sourceMappingURL=MessageCenter.d.ts.map

package/lib/cjs/appui-react/statusfields/MessageCenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCenter.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/MessageCenter.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,aAAK,sBAAsB;IACzB,WAAW,IAAA;IACX,QAAQ,IAAA;CACT;AAED;;GAEG;AACH,UAAU,kBAAkB;IAC1B,SAAS,EAAE,sBAAsB,CAAC;IAClC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACtF,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,MAAM,CAAmD;IACjE,OAAO,CAAC,6BAA6B,CAAC,CAAa;IACnD,OAAO,CAAC,gCAAgC,CAAC,CAAa;gBAE1C,CAAC,EAAE,WAAW;IAW1B,gBAAgB;IACA,iBAAiB;IAMjC,gBAAgB;IACA,oBAAoB;IAapC,OAAO,CAAC,2BAA2B,CAIjC;IAEF,OAAO,CAAC,6BAA6B,CAEnC;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAqDzC,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,mBAAmB,CAOzB;IAEF,OAAO,CAAC,4BAA4B,CAElC;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,WAAW;IA+BnB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,SAAS;CAGlB"}
+{"version":3,"file":"MessageCenter.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/MessageCenter.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,aAAK,sBAAsB;IACzB,WAAW,IAAA;IACX,QAAQ,IAAA;CACT;AAED;;GAEG;AACH,UAAU,kBAAkB;IAC1B,SAAS,EAAE,sBAAsB,CAAC;IAClC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D;;MAEE;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,EAAE,kBAAkB,CAAC;IAClG,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,MAAM,CAAmD;IACjE,OAAO,CAAC,6BAA6B,CAAC,CAAa;IACnD,OAAO,CAAC,gCAAgC,CAAC,CAAa;gBAE1C,CAAC,EAAE,uBAAuB;IAetC,gBAAgB;IACA,iBAAiB;IAMjC,gBAAgB;IACA,oBAAoB;IAapC,OAAO,CAAC,2BAA2B,CAIjC;IAEF,OAAO,CAAC,6BAA6B,CAEnC;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAyDzC,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,mBAAmB,CAOzB;IAEF,OAAO,CAAC,4BAA4B,CAOlC;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,WAAW;IA+BnB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,aAAa;CAKtB"}