@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/appui-react/statusbar/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Field.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,4FAsBzB,CAAC"}

package/lib/esm/appui-react/statusbar/Field.js

@@ -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.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./Field.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { FooterIndicator } from "@itwin/appui-layout-react";
+/** Field component used in [[StatusBar]] component.
+ * @beta
+ */
+export const StatusBarField = React.forwardRef(function StatusBarField(props, ref) {
+    const hasClickAction = !!props.onClick;
+    const classNames = classnames("uifw-statusbar-field", hasClickAction && "uifw-action", props.className);
+    return (React.createElement(FooterIndicator, { ref: ref, className: classNames, title: props.title, style: props.style, onClick: props.onClick, ...{
+            role: "button",
+            tabIndex: -1,
+        } }, props.children));
+});
+//# sourceMappingURL=Field.js.map

package/lib/esm/appui-react/statusbar/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Field.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAc5D;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IACpH,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;IACvC,MAAM,UAAU,GAAG,UAAU,CAC3B,sBAAsB,EACtB,cAAc,IAAI,aAAa,EAC/B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,KAClB;YACF,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC,CAAC;SACb,IAEA,KAAK,CAAC,QAAQ,CACC,CACnB,CAAC;AACJ,CAAC,CAAC,CAAC","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 \"./Field.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\n\r\n/** Properties of [[StatusBarField]] component.\r\n * @beta\r\n */\r\nexport interface StatusBarFieldProps extends CommonProps {\r\n  /** Field content. */\r\n  children?: React.ReactNode;\r\n  /** Function called when field is clicked. */\r\n  onClick?: () => void;\r\n  /** Title of a field. */\r\n  title?: string;\r\n}\r\n\r\n/** Field component used in [[StatusBar]] component.\r\n * @beta\r\n */\r\nexport const StatusBarField = React.forwardRef<HTMLDivElement, StatusBarFieldProps>(function StatusBarField(props, ref) {\r\n  const hasClickAction = !!props.onClick;\r\n  const classNames = classnames(\r\n    \"uifw-statusbar-field\",\r\n    hasClickAction && \"uifw-action\",\r\n    props.className,\r\n  );\r\n  return (\r\n    <FooterIndicator\r\n      ref={ref}\r\n      className={classNames}\r\n      title={props.title}\r\n      style={props.style}\r\n      onClick={props.onClick}\r\n      {...{\r\n        role: \"button\",\r\n        tabIndex: -1,\r\n      }}\r\n    >\r\n      {props.children}\r\n    </FooterIndicator>\r\n  );\r\n});\r\n"]}

package/lib/esm/appui-react/statusbar/{Indicator.scss → Field.scss}

@@ -5,7 +5,7 @@
 @import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/style/colors";
 
-@keyframes uifw-indicator-fadeIn {
+@keyframes uifw-field-fadeIn {
   0% {
     opacity: 0;
     -webkit-transform: scale(0.5);
@@ -24,7 +24,7 @@
   }
 }
 
-@keyframes uifw-indicator-fadeOut {
+@keyframes uifw-field-fadeOut {
   0% {
     opacity: 1;
   }
@@ -34,7 +34,7 @@
   }
 }
 
-.uifw-statusbar-indicator {
+.uifw-statusbar-field {
   visibility: visible;
   gap: var(--iui-size-xs);
 
@@ -46,25 +46,25 @@
     }
   }
 
-  &.uifw-indicator-fade-in {
-    animation: uifw-indicator-fadeIn 1s linear;
+  &.uifw-field-fade-in {
+    animation: uifw-field-fadeIn 1s linear;
     opacity: 1;
     pointer-events: auto;
   }
 
-  &.uifw-indicator-fade-out {
-    animation: uifw-indicator-fadeOut 500ms linear;
+  &.uifw-field-fade-out {
+    animation: uifw-field-fadeOut 500ms linear;
     opacity: 0;
     pointer-events: none;
   }
 
-  > .nz-balloon-container {
+  >.nz-balloon-container {
     height: 100%;
     position: relative;
     display: grid;
     align-content: center;
 
-    > .nz-balloon {
+    >.nz-balloon {
       background-color: var(--iui-color-text);
       text-align: center;
       cursor: pointer;
@@ -76,7 +76,7 @@
       position: relative;
       align-self: center;
 
-      > .nz-arrow {
+      >.nz-arrow {
         position: absolute;
         width: 0;
         bottom: -3px;
@@ -90,7 +90,7 @@
         transform: rotate(25deg);
       }
 
-      > .nz-content {
+      >.nz-content {
         position: relative;
         color: #fff;
         line-height: $min-balloon-height;
@@ -98,7 +98,7 @@
       }
     }
 
-    > .nz-dialog {
+    >.nz-dialog {
       height: 100%;
       width: 100%;
       position: absolute;

package/lib/esm/appui-react/statusbar/Indicator.d.ts

@@ -1,26 +1,25 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./Indicator.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[StatusBarIndicator]] component.
- * @beta
- */
-export interface StatusBarIndicatorProps extends CommonProps {
-    /** Indicator content. */
-    children?: React.ReactNode;
-    /** Content to display in a popup when indicator is clicked. */
-    popup?: React.ReactNode;
-    /** Function called when indicator is clicked. */
-    onClick?: () => void;
-    /** Default state of an indicator popup. */
-    defaultIsOpen?: boolean;
-    /** Title of an indicator. */
-    title?: string;
-}
-/** General-purpose [[StatusBar]] indicator.
- * @beta
- */
-export declare function StatusBarIndicator(props: StatusBarIndicatorProps): JSX.Element;
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StatusBarIndicator]] component.
+ * @beta
+ */
+export interface StatusBarIndicatorProps extends CommonProps {
+    /** Indicator content. */
+    children?: React.ReactNode;
+    /** Content to display in a popup when indicator is clicked. */
+    popup?: React.ReactNode;
+    /** Function called when indicator is clicked. */
+    onClick?: () => void;
+    /** Default state of an indicator popup. */
+    defaultIsOpen?: boolean;
+    /** Title of an indicator. */
+    title?: string;
+}
+/** General-purpose [[StatusBar]] indicator.
+ * @beta
+ */
+export declare function StatusBarIndicator(props: StatusBarIndicatorProps): JSX.Element;
 //# sourceMappingURL=Indicator.d.ts.map

package/lib/esm/appui-react/statusbar/Indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAqChE"}
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eA4BhE"}

package/lib/esm/appui-react/statusbar/Indicator.js

@@ -1,32 +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 StatusBar
- */
-import "./Indicator.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { FooterIndicator, FooterPopup } from "@itwin/appui-layout-react";
-/** General-purpose [[StatusBar]] indicator.
- * @beta
- */
-export function StatusBarIndicator(props) {
-    const hasClickAction = !!props.onClick || !!props.popup;
-    const [isOpen, setIsOpen] = React.useState(!!props.defaultIsOpen);
-    const handleOnIndicatorClick = () => {
-        var _a;
-        setIsOpen(!isOpen);
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    };
-    const target = React.useRef(null);
-    const classNames = classnames("uifw-statusbar-indicator", hasClickAction && "uifw-action", props.className);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FooterIndicator, { ref: target, className: classNames, title: props.title, style: props.style, onClick: handleOnIndicatorClick, ...{
-                role: "button",
-                tabIndex: -1,
-            } }, props.children),
-        props.popup && React.createElement(FooterPopup, { target: target.current, onClose: () => setIsOpen(false), isOpen: isOpen }, props.popup)));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { StatusBar } from "./StatusBar";
+/** General-purpose [[StatusBar]] indicator.
+ * @beta
+ */
+export function StatusBarIndicator(props) {
+    const hasClickAction = !!props.onClick || !!props.popup;
+    const [isOpen, setIsOpen] = React.useState(!!props.defaultIsOpen);
+    const handleOnIndicatorClick = () => {
+        setIsOpen(!isOpen);
+        props.onClick?.();
+    };
+    const target = React.useRef(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StatusBar.Field, { ref: target, className: props.className, title: props.title, style: props.style, onClick: hasClickAction ? handleOnIndicatorClick : undefined }, props.children),
+        props.popup && React.createElement(StatusBar.Popup, { target: target.current, onClose: () => setIsOpen(false), isOpen: isOpen }, props.popup)));
+}
 //# sourceMappingURL=Indicator.js.map

package/lib/esm/appui-react/statusbar/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Indicator.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAkBzE;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAClE,MAAM,sBAAsB,GAAG,GAAG,EAAE;;QAClC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;QACnB,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,CAAY,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,UAAU,CAC3B,0BAA0B,EAC1B,cAAc,IAAI,aAAa,EAC/B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL;QACE,oBAAC,eAAe,IACd,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,sBAAsB,KAC3B;gBACF,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,CAAC,CAAC;aACb,IAEA,KAAK,CAAC,QAAQ,CACC;QACjB,KAAK,CAAC,KAAK,IAAI,oBAAC,WAAW,IAC1B,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,KAAK,CACA,CACb,CACJ,CAAC;AACJ,CAAC","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 { CommonProps } from \"@itwin/core-react\";\r\nimport { FooterIndicator, FooterPopup } from \"@itwin/appui-layout-react\";\r\n\r\n/** Properties of [[StatusBarIndicator]] component.\r\n * @beta\r\n */\r\nexport interface StatusBarIndicatorProps extends CommonProps {\r\n  /** Indicator content. */\r\n  children?: React.ReactNode;\r\n  /** Content to display in a popup when indicator is clicked. */\r\n  popup?: React.ReactNode;\r\n  /** Function called when indicator is clicked. */\r\n  onClick?: () => void;\r\n  /** Default state of an indicator popup. */\r\n  defaultIsOpen?: boolean;\r\n  /** Title of an indicator. */\r\n  title?: string;\r\n}\r\n\r\n/** General-purpose [[StatusBar]] indicator.\r\n * @beta\r\n */\r\nexport function StatusBarIndicator(props: StatusBarIndicatorProps) {\r\n  const hasClickAction = !!props.onClick || !!props.popup;\r\n  const [isOpen, setIsOpen] = React.useState(!!props.defaultIsOpen);\r\n  const handleOnIndicatorClick = () => {\r\n    setIsOpen(!isOpen);\r\n    props.onClick?.();\r\n  };\r\n  const target = React.useRef<HTMLDivElement>(null);\r\n  const classNames = classnames(\r\n    \"uifw-statusbar-indicator\",\r\n    hasClickAction && \"uifw-action\",\r\n    props.className,\r\n  );\r\n  return (\r\n    <>\r\n      <FooterIndicator\r\n        ref={target}\r\n        className={classNames}\r\n        title={props.title}\r\n        style={props.style}\r\n        onClick={handleOnIndicatorClick}\r\n        {...{\r\n          role: \"button\",\r\n          tabIndex: -1,\r\n        }}\r\n      >\r\n        {props.children}\r\n      </FooterIndicator>\r\n      {props.popup && <FooterPopup\r\n        target={target.current}\r\n        onClose={() => setIsOpen(false)}\r\n        isOpen={isOpen}\r\n      >\r\n        {props.popup}\r\n      </FooterPopup>}\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Indicator.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAkBxC;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAClE,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;QACnB,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,OAAO,CACL;QACE,oBAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,IAE3D,KAAK,CAAC,QAAQ,CACC;QACjB,KAAK,CAAC,KAAK,IAAI,oBAAC,SAAS,CAAC,KAAK,IAC9B,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,KAAK,CACI,CACjB,CACJ,CAAC;AACJ,CAAC","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 { CommonProps } from \"@itwin/core-react\";\r\nimport { StatusBar } from \"./StatusBar\";\r\n\r\n/** Properties of [[StatusBarIndicator]] component.\r\n * @beta\r\n */\r\nexport interface StatusBarIndicatorProps extends CommonProps {\r\n  /** Indicator content. */\r\n  children?: React.ReactNode;\r\n  /** Content to display in a popup when indicator is clicked. */\r\n  popup?: React.ReactNode;\r\n  /** Function called when indicator is clicked. */\r\n  onClick?: () => void;\r\n  /** Default state of an indicator popup. */\r\n  defaultIsOpen?: boolean;\r\n  /** Title of an indicator. */\r\n  title?: string;\r\n}\r\n\r\n/** General-purpose [[StatusBar]] indicator.\r\n * @beta\r\n */\r\nexport function StatusBarIndicator(props: StatusBarIndicatorProps) {\r\n  const hasClickAction = !!props.onClick || !!props.popup;\r\n  const [isOpen, setIsOpen] = React.useState(!!props.defaultIsOpen);\r\n  const handleOnIndicatorClick = () => {\r\n    setIsOpen(!isOpen);\r\n    props.onClick?.();\r\n  };\r\n  const target = React.useRef<HTMLDivElement>(null);\r\n  return (\r\n    <>\r\n      <StatusBar.Field\r\n        ref={target}\r\n        className={props.className}\r\n        title={props.title}\r\n        style={props.style}\r\n        onClick={hasClickAction ? handleOnIndicatorClick : undefined}\r\n      >\r\n        {props.children}\r\n      </StatusBar.Field>\r\n      {props.popup && <StatusBar.Popup\r\n        target={target.current}\r\n        onClose={() => setIsOpen(false)}\r\n        isOpen={isOpen}\r\n      >\r\n        {props.popup}\r\n      </StatusBar.Popup>}\r\n    </>\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/statusbar/LabelIndicator.d.ts

@@ -1,24 +1,24 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-/// <reference types="react" />
-import "./LabelIndicator.scss";
-import { StatusBarIndicatorProps } from "./Indicator";
-import { IconSpec } from "@itwin/core-react";
-import { StatusBarLabelSide } from "./StatusBarItem";
-/** Properties of [[StatusBarLabelIndicator]] component.
- * @beta
- */
-export interface StatusBarLabelIndicatorProps extends Omit<StatusBarIndicatorProps, "children"> {
-    /** Specification of an icon. */
-    iconSpec?: IconSpec;
-    /** Indicator label. */
-    label?: string;
-    /** Side to display label. */
-    labelSide?: StatusBarLabelSide;
-}
-/** [[StatusBar]] indicator that shows a label with an icon.
- * @beta
- */
-export declare function StatusBarLabelIndicator(props: StatusBarLabelIndicatorProps): JSX.Element;
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import "./LabelIndicator.scss";
+import { StatusBarIndicatorProps } from "./Indicator";
+import { IconSpec } from "@itwin/core-react";
+import { StatusBarLabelSide } from "./StatusBarItem";
+/** Properties of [[StatusBarLabelIndicator]] component.
+ * @beta
+ */
+export interface StatusBarLabelIndicatorProps extends Omit<StatusBarIndicatorProps, "children"> {
+    /** Specification of an icon. */
+    iconSpec?: IconSpec;
+    /** Indicator label. */
+    label?: string;
+    /** Side to display label. */
+    labelSide?: StatusBarLabelSide;
+}
+/** [[StatusBar]] indicator that shows a label with an icon.
+ * @beta
+ */
+export declare function StatusBarLabelIndicator(props: StatusBarLabelIndicatorProps): JSX.Element;
 //# sourceMappingURL=LabelIndicator.d.ts.map

package/lib/esm/appui-react/statusbar/LabelIndicator.js

@@ -1,25 +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 StatusBar
- */
-import "./LabelIndicator.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { StatusBarIndicator } from "./Indicator";
-import { Icon } from "@itwin/core-react";
-import { StatusBarLabelSide } from "./StatusBarItem";
-/** [[StatusBar]] indicator that shows a label with an icon.
- * @beta
- */
-export function StatusBarLabelIndicator(props) {
-    const { className, iconSpec, label, labelSide, ...other } = props;
-    const classNames = classnames("uifw-statusbar-labelIndicator", labelSide === StatusBarLabelSide.Right && "uifw-reversed", className);
-    return (React.createElement(StatusBarIndicator, { className: classNames, ...other },
-        label && React.createElement("span", { className: "uifw-label" }, label),
-        iconSpec && React.createElement("div", { className: "uifw-icon" },
-            React.createElement(Icon, { iconSpec: iconSpec }))));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./LabelIndicator.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { StatusBarIndicator } from "./Indicator";
+import { Icon } from "@itwin/core-react";
+import { StatusBarLabelSide } from "./StatusBarItem";
+/** [[StatusBar]] indicator that shows a label with an icon.
+ * @beta
+ */
+export function StatusBarLabelIndicator(props) {
+    const { className, iconSpec, label, labelSide, ...other } = props;
+    const classNames = classnames("uifw-statusbar-labelIndicator", labelSide === StatusBarLabelSide.Right && "uifw-reversed", className);
+    return (React.createElement(StatusBarIndicator, { className: classNames, ...other },
+        label && React.createElement("span", { className: "uifw-label" }, label),
+        iconSpec && React.createElement("div", { className: "uifw-icon" },
+            React.createElement(Icon, { iconSpec: iconSpec }))));
+}
 //# sourceMappingURL=LabelIndicator.js.map

package/lib/esm/appui-react/statusbar/Overflow.d.ts

@@ -1,20 +1,20 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./Overflow.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[StatusBarOverflow]] component.
- * @internal
- */
-export interface StatusBarOverflowProps extends CommonProps {
-    /** Function called when button is clicked. */
-    onClick?: () => void;
-    /** Function called when button is resized. */
-    onResize?: (w: number) => void;
-}
-/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
- * @internal
- */
-export declare const StatusBarOverflow: React.ForwardRefExoticComponent<StatusBarOverflowProps & React.RefAttributes<HTMLDivElement>>;
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./Overflow.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StatusBarOverflow]] component.
+ * @internal
+ */
+export interface StatusBarOverflowProps extends CommonProps {
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Function called when button is resized. */
+    onResize?: (w: number) => void;
+}
+/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
+ * @internal
+ */
+export declare const StatusBarOverflow: React.ForwardRefExoticComponent<StatusBarOverflowProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Overflow.d.ts.map

package/lib/esm/appui-react/statusbar/Overflow.js

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./Overflow.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { useRefs, useResizeObserver } from "@itwin/core-react";
-import { Ellipsis } from "@itwin/appui-layout-react";
-import { UiFramework } from "../UiFramework";
-/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
- * @internal
- */
-export const StatusBarOverflow = React.forwardRef(function StatusBarOverflow(props, ref) {
-    const roRef = useResizeObserver(props.onResize);
-    const refs = useRefs(roRef, ref);
-    const className = classnames("uifw-statusbar-overflow", props.className);
-    const title = React.useRef(UiFramework.translate("statusBar.overflow"));
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { className: className, onClick: props.onClick, ref: refs, style: props.style, role: "button", tabIndex: -1, title: title.current },
-        React.createElement(Ellipsis, null)));
-});
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Overflow.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useRefs, useResizeObserver } from "@itwin/core-react";
+import { Ellipsis } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
+ * @internal
+ */
+export const StatusBarOverflow = React.forwardRef(function StatusBarOverflow(props, ref) {
+    const roRef = useResizeObserver(props.onResize);
+    const refs = useRefs(roRef, ref);
+    const className = classnames("uifw-statusbar-overflow", props.className);
+    const title = React.useRef(UiFramework.translate("statusBar.overflow"));
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { className: className, onClick: props.onClick, ref: refs, style: props.style, role: "button", tabIndex: -1, title: title.current },
+        React.createElement(Ellipsis, null)));
+});
 //# sourceMappingURL=Overflow.js.map

package/lib/esm/appui-react/statusbar/OverflowPanel.d.ts

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./OverflowPanel.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[StatusBarOverflowPanel]] component.
- * @internal
- */
-export interface StatusBarOverflowPanelProps extends CommonProps {
-    /** Panel content. */
-    children?: React.ReactNode;
-    onClose: () => void;
-    target: HTMLElement | undefined;
-    open: boolean;
-}
-/** Displays overflow status bar items.
- * @internal
- */
-export declare function StatusBarOverflowPanel(props: StatusBarOverflowPanelProps): JSX.Element;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./OverflowPanel.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StatusBarOverflowPanel]] component.
+ * @internal
+ */
+export interface StatusBarOverflowPanelProps extends CommonProps {
+    /** Panel content. */
+    children?: React.ReactNode;
+    onClose: () => void;
+    target: HTMLElement | undefined;
+    open: boolean;
+}
+/** Displays overflow status bar items.
+ * @internal
+ */
+export declare function StatusBarOverflowPanel(props: StatusBarOverflowPanelProps): JSX.Element;
 //# sourceMappingURL=OverflowPanel.d.ts.map

package/lib/esm/appui-react/statusbar/OverflowPanel.js

@@ -1,19 +1,19 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./OverflowPanel.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Popup } from "@itwin/core-react";
-/** Displays overflow status bar items.
- * @internal
- */
-export function StatusBarOverflowPanel(props) {
-    const className = classnames("uifw-statusbar-panel", props.className);
-    return (React.createElement(Popup, { className: className, isOpen: props.open, offset: 0, onClose: props.onClose, style: props.style, showShadow: true, target: props.target }, props.children));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./OverflowPanel.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Popup } from "@itwin/core-react";
+/** Displays overflow status bar items.
+ * @internal
+ */
+export function StatusBarOverflowPanel(props) {
+    const className = classnames("uifw-statusbar-panel", props.className);
+    return (React.createElement(Popup, { className: className, isOpen: props.open, offset: 0, onClose: props.onClose, style: props.style, showShadow: true, target: props.target }, props.children));
+}
 //# sourceMappingURL=OverflowPanel.js.map

package/lib/esm/appui-react/statusbar/Popup.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import { PopupProps } from "@itwin/core-react";
+/** Popup component used in [[StatusBar]] component.
+ * @beta
+ */
+export declare function StatusBarPopup(props: Partial<PopupProps>): JSX.Element;
+//# sourceMappingURL=Popup.d.ts.map

package/lib/esm/appui-react/statusbar/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Popup.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,eAMxD"}

package/lib/esm/appui-react/statusbar/Popup.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { FooterPopup } from "@itwin/appui-layout-react";
+/** Popup component used in [[StatusBar]] component.
+ * @beta
+ */
+export function StatusBarPopup(props) {
+    return (React.createElement(FooterPopup, { ...props }));
+}
+//# sourceMappingURL=Popup.js.map

package/lib/esm/appui-react/statusbar/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Popup.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,OAAO,CACL,oBAAC,WAAW,OACN,KAAK,GACT,CACH,CAAC;AACJ,CAAC","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 { PopupProps } from \"@itwin/core-react\";\r\nimport { FooterPopup } from \"@itwin/appui-layout-react\";\r\n\r\n/** Popup component used in [[StatusBar]] component.\r\n * @beta\r\n */\r\nexport function StatusBarPopup(props: Partial<PopupProps>) {\r\n  return (\r\n    <FooterPopup\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/statusbar/Separator.d.ts

@@ -1,11 +1,11 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-/// <reference types="react" />
-import "./Separator.scss";
-import { CommonProps } from "@itwin/core-react";
-/** Component used to separate status fields in a status bar.
- * @public
- */
-export declare function StatusBarSeparator(props: CommonProps): JSX.Element;
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import "./Separator.scss";
+import { CommonProps } from "@itwin/core-react";
+/** Component used to separate status fields in a status bar.
+ * @public
+ */
+export declare function StatusBarSeparator(props: CommonProps): JSX.Element;
 //# sourceMappingURL=Separator.d.ts.map

package/lib/esm/appui-react/statusbar/Separator.js

@@ -1,18 +1,18 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./Separator.scss";
-import * as React from "react";
-import classnames from "classnames";
-/** Component used to separate status fields in a status bar.
- * @public
- */
-export function StatusBarSeparator(props) {
-    const className = classnames("uifw-statusbar-separator", props.className);
-    return (React.createElement("div", { className: className, style: props.style }));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Separator.scss";
+import * as React from "react";
+import classnames from "classnames";
+/** Component used to separate status fields in a status bar.
+ * @public
+ */
+export function StatusBarSeparator(props) {
+    const className = classnames("uifw-statusbar-separator", props.className);
+    return (React.createElement("div", { className: className, style: props.style }));
+}
 //# sourceMappingURL=Separator.js.map