@itwin/appui-react 3.6.0-dev.8 → 3.6.0

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

@@ -1,110 +1,110 @@
-/*---------------------------------------------------------------------------------------------
-* 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/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-statusbar-indicator {
-  visibility: visible;
-  gap: 8px;
-
-  &.uifw-action {
-    cursor: pointer;
-
-    &:hover {
-      color: $buic-foreground-primary;
-    }
-  }
-
-  &.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;
-  }
-
-  >.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%;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/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-statusbar-indicator {
+  visibility: visible;
+  gap: 8px;
+
+  &.uifw-action {
+    cursor: pointer;
+
+    &:hover {
+      color: $buic-foreground-primary;
+    }
+  }
+
+  &.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;
+  }
+
+  >.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%;
+    }
+  }
+}

package/lib/cjs/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 "@itwin/appui-abstract";
-/** 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 "@itwin/appui-abstract";
+/** 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/cjs/appui-react/statusbar/LabelIndicator.js

@@ -1,29 +1,30 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusBarLabelIndicator = void 0;
-require("./LabelIndicator.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const Indicator_1 = require("./Indicator");
-const core_react_1 = require("@itwin/core-react");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-/** [[StatusBar]] indicator that shows a label with an icon.
- * @beta
- */
-function StatusBarLabelIndicator(props) {
-    const { className, iconSpec, label, labelSide, ...other } = props;
-    const classNames = (0, classnames_1.default)("uifw-statusbar-labelIndicator", labelSide === appui_abstract_1.StatusBarLabelSide.Right && "uifw-reversed", className);
-    return (React.createElement(Indicator_1.StatusBarIndicator, { className: classNames, ...other },
-        label && React.createElement("span", { className: "uifw-label" }, label),
-        iconSpec && React.createElement("div", { className: "uifw-icon" },
-            React.createElement(core_react_1.Icon, { iconSpec: iconSpec }))));
-}
-exports.StatusBarLabelIndicator = StatusBarLabelIndicator;
+"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.StatusBarLabelIndicator = void 0;
+require("./LabelIndicator.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Indicator_1 = require("./Indicator");
+const core_react_1 = require("@itwin/core-react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/** [[StatusBar]] indicator that shows a label with an icon.
+ * @beta
+ */
+function StatusBarLabelIndicator(props) {
+    const { className, iconSpec, label, labelSide, ...other } = props;
+    const classNames = (0, classnames_1.default)("uifw-statusbar-labelIndicator", labelSide === appui_abstract_1.StatusBarLabelSide.Right && "uifw-reversed", // eslint-disable-line deprecation/deprecation
+    className);
+    return (React.createElement(Indicator_1.StatusBarIndicator, { className: classNames, ...other },
+        label && React.createElement("span", { className: "uifw-label" }, label),
+        iconSpec && React.createElement("div", { className: "uifw-icon" },
+            React.createElement(core_react_1.Icon, { iconSpec: iconSpec }))));
+}
+exports.StatusBarLabelIndicator = StatusBarLabelIndicator;
 //# sourceMappingURL=LabelIndicator.js.map

package/lib/cjs/appui-react/statusbar/LabelIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabelIndicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/LabelIndicator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAC/B,2CAA0E;AAC1E,kDAAmD;AACnD,0DAA2D;AAc3D;;GAEG;AACH,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAClE,MAAM,UAAU,GAAG,IAAA,oBAAU,EAC3B,+BAA+B,EAC/B,SAAS,KAAK,mCAAkB,CAAC,KAAK,IAAI,eAAe,EACzD,SAAS,CACV,CAAC;IACF,OAAO,CACL,oBAAC,8BAAkB,IACjB,SAAS,EAAE,UAAU,KACjB,KAAK;QAER,KAAK,IAAI,8BAAM,SAAS,EAAC,YAAY,IAAE,KAAK,CAAQ;QACpD,QAAQ,IAAI,6BAAK,SAAS,EAAC,WAAW;YAAC,oBAAC,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAM,CACvD,CACtB,CAAC;AACJ,CAAC;AAhBD,0DAgBC","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 \"./LabelIndicator.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { StatusBarIndicator, StatusBarIndicatorProps } from \"./Indicator\";\r\nimport { Icon, IconSpec } from \"@itwin/core-react\";\r\nimport { StatusBarLabelSide } from \"@itwin/appui-abstract\";\r\n\r\n/** Properties of [[StatusBarLabelIndicator]] component.\r\n * @beta\r\n */\r\nexport interface StatusBarLabelIndicatorProps extends Omit<StatusBarIndicatorProps, \"children\"> {\r\n  /** Specification of an icon. */\r\n  iconSpec?: IconSpec;\r\n  /** Indicator label. */\r\n  label?: string;\r\n  /** Side to display label. */\r\n  labelSide?: StatusBarLabelSide;\r\n}\r\n\r\n/** [[StatusBar]] indicator that shows a label with an icon.\r\n * @beta\r\n */\r\nexport function StatusBarLabelIndicator(props: StatusBarLabelIndicatorProps) {\r\n  const { className, iconSpec, label, labelSide, ...other } = props;\r\n  const classNames = classnames(\r\n    \"uifw-statusbar-labelIndicator\",\r\n    labelSide === StatusBarLabelSide.Right && \"uifw-reversed\",\r\n    className,\r\n  );\r\n  return (\r\n    <StatusBarIndicator\r\n      className={classNames}\r\n      {...other}\r\n    >\r\n      {label && <span className=\"uifw-label\">{label}</span>}\r\n      {iconSpec && <div className=\"uifw-icon\"><Icon iconSpec={iconSpec} /></div>}\r\n    </StatusBarIndicator>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"LabelIndicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/LabelIndicator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAC/B,2CAA0E;AAC1E,kDAAmD;AACnD,0DAA2D;AAc3D;;GAEG;AACH,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAClE,MAAM,UAAU,GAAG,IAAA,oBAAU,EAC3B,+BAA+B,EAC/B,SAAS,KAAK,mCAAkB,CAAC,KAAK,IAAI,eAAe,EAAE,8CAA8C;IACzG,SAAS,CACV,CAAC;IACF,OAAO,CACL,oBAAC,8BAAkB,IACjB,SAAS,EAAE,UAAU,KACjB,KAAK;QAER,KAAK,IAAI,8BAAM,SAAS,EAAC,YAAY,IAAE,KAAK,CAAQ;QACpD,QAAQ,IAAI,6BAAK,SAAS,EAAC,WAAW;YAAC,oBAAC,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAM,CACvD,CACtB,CAAC;AACJ,CAAC;AAhBD,0DAgBC","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 StatusBar\n */\n\nimport \"./LabelIndicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { StatusBarIndicator, StatusBarIndicatorProps } from \"./Indicator\";\nimport { Icon, IconSpec } from \"@itwin/core-react\";\nimport { StatusBarLabelSide } from \"@itwin/appui-abstract\";\n\n/** Properties of [[StatusBarLabelIndicator]] component.\n * @beta\n */\nexport interface StatusBarLabelIndicatorProps extends Omit<StatusBarIndicatorProps, \"children\"> {\n  /** Specification of an icon. */\n  iconSpec?: IconSpec;\n  /** Indicator label. */\n  label?: string;\n  /** Side to display label. */\n  labelSide?: StatusBarLabelSide; // eslint-disable-line deprecation/deprecation\n}\n\n/** [[StatusBar]] indicator that shows a label with an icon.\n * @beta\n */\nexport function StatusBarLabelIndicator(props: StatusBarLabelIndicatorProps) {\n  const { className, iconSpec, label, labelSide, ...other } = props;\n  const classNames = classnames(\n    \"uifw-statusbar-labelIndicator\",\n    labelSide === StatusBarLabelSide.Right && \"uifw-reversed\", // eslint-disable-line deprecation/deprecation\n    className,\n  );\n  return (\n    <StatusBarIndicator\n      className={classNames}\n      {...other}\n    >\n      {label && <span className=\"uifw-label\">{label}</span>}\n      {iconSpec && <div className=\"uifw-icon\"><Icon iconSpec={iconSpec} /></div>}\n    </StatusBarIndicator>\n  );\n}\n"]}

package/lib/cjs/appui-react/statusbar/LabelIndicator.scss

@@ -1,43 +1,43 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-
-.uifw-statusbar-labelIndicator {
-  &.uifw-reversed {
-    flex-direction: row-reverse;
-  }
-
-  >.uifw-label {
-    font-size: $text-font-size;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    @include for-tablet-landscape-down {
-      display: none;
-    }
-  }
-
-  >.uifw-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;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.uifw-statusbar-labelIndicator {
+  &.uifw-reversed {
+    flex-direction: row-reverse;
+  }
+
+  >.uifw-label {
+    font-size: $text-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include for-tablet-landscape-down {
+      display: none;
+    }
+  }
+
+  >.uifw-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/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.MemoExoticComponent<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.MemoExoticComponent<React.ForwardRefExoticComponent<StatusBarOverflowProps & React.RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=Overflow.d.ts.map

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

@@ -1,31 +1,31 @@
-"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.StatusBarOverflow = void 0;
-require("./Overflow.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const core_react_1 = require("@itwin/core-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const UiFramework_1 = require("../UiFramework");
-/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
- * @internal
- */
-// eslint-disable-next-line react/display-name, @typescript-eslint/naming-convention
-exports.StatusBarOverflow = React.memo(React.forwardRef(function StatusBarOverflow(props, ref) {
-    const roRef = (0, core_react_1.useResizeObserver)(props.onResize);
-    const refs = (0, core_react_1.useRefs)(roRef, ref);
-    const className = (0, classnames_1.default)("uifw-statusbar-overflow", props.className);
-    const title = React.useRef(UiFramework_1.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(appui_layout_react_1.Ellipsis, null)));
-}));
+"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.StatusBarOverflow = void 0;
+require("./Overflow.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const UiFramework_1 = require("../UiFramework");
+/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
+ * @internal
+ */
+// eslint-disable-next-line react/display-name, @typescript-eslint/naming-convention
+exports.StatusBarOverflow = React.memo(React.forwardRef(function StatusBarOverflow(props, ref) {
+    const roRef = (0, core_react_1.useResizeObserver)(props.onResize);
+    const refs = (0, core_react_1.useRefs)(roRef, ref);
+    const className = (0, classnames_1.default)("uifw-statusbar-overflow", props.className);
+    const title = React.useRef(UiFramework_1.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(appui_layout_react_1.Ellipsis, null)));
+}));
 //# sourceMappingURL=Overflow.js.map

package/lib/cjs/appui-react/statusbar/Overflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAC/B,kDAA4E;AAC5E,kEAAqD;AACrD,gDAA6C;AAY7C;;GAEG;AACH,oFAAoF;AACvE,QAAA,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,KAAK,CAAC,UAAU,CACd,SAAS,iBAAiB,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,KAAK,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,yBAAyB,EACzB,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAExE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,KAAK,CAAC,OAAO;QAEpB,oBAAC,6BAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CACF,CACF,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 \"./Overflow.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, useRefs, useResizeObserver } from \"@itwin/core-react\";\r\nimport { Ellipsis } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/** Properties of [[StatusBarOverflow]] component.\r\n * @internal\r\n */\r\nexport interface StatusBarOverflowProps extends CommonProps {\r\n  /** Function called when button is clicked. */\r\n  onClick?: () => void;\r\n  /** Function called when button is resized. */\r\n  onResize?: (w: number) => void;\r\n}\r\n\r\n/** Entry point to overflow status bar items of [[StatusBarComposer]] component.\r\n * @internal\r\n */\r\n// eslint-disable-next-line react/display-name, @typescript-eslint/naming-convention\r\nexport const StatusBarOverflow = React.memo(\r\n  React.forwardRef<HTMLDivElement, StatusBarOverflowProps>(\r\n    function StatusBarOverflow(props, ref) { // eslint-disable-line @typescript-eslint/no-shadow, @typescript-eslint/naming-convention\r\n      const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\r\n      const refs = useRefs(roRef, ref);\r\n      const className = classnames(\r\n        \"uifw-statusbar-overflow\",\r\n        props.className,\r\n      );\r\n      const title = React.useRef(UiFramework.translate(\"statusBar.overflow\"));\r\n\r\n      return (\r\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n        <div\r\n          className={className}\r\n          onClick={props.onClick}\r\n          ref={refs}\r\n          style={props.style}\r\n          role=\"button\"\r\n          tabIndex={-1}\r\n          title={title.current}\r\n        >\r\n          <Ellipsis />\r\n        </div>\r\n      );\r\n    },\r\n  ),\r\n);\r\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAC/B,kDAA4E;AAC5E,kEAAqD;AACrD,gDAA6C;AAY7C;;GAEG;AACH,oFAAoF;AACvE,QAAA,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,KAAK,CAAC,UAAU,CACd,SAAS,iBAAiB,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,KAAK,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,yBAAyB,EACzB,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAExE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,KAAK,CAAC,OAAO;QAEpB,oBAAC,6BAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CACF,CACF,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { Ellipsis } from \"@itwin/appui-layout-react\";\nimport { UiFramework } from \"../UiFramework\";\n\n/** Properties of [[StatusBarOverflow]] component.\n * @internal\n */\nexport interface StatusBarOverflowProps extends CommonProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when button is resized. */\n  onResize?: (w: number) => void;\n}\n\n/** Entry point to overflow status bar items of [[StatusBarComposer]] component.\n * @internal\n */\n// eslint-disable-next-line react/display-name, @typescript-eslint/naming-convention\nexport const StatusBarOverflow = React.memo(\n  React.forwardRef<HTMLDivElement, StatusBarOverflowProps>(\n    function StatusBarOverflow(props, ref) { // eslint-disable-line @typescript-eslint/no-shadow, @typescript-eslint/naming-convention\n      const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\n      const refs = useRefs(roRef, ref);\n      const className = classnames(\n        \"uifw-statusbar-overflow\",\n        props.className,\n      );\n      const title = React.useRef(UiFramework.translate(\"statusBar.overflow\"));\n\n      return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n        <div\n          className={className}\n          onClick={props.onClick}\n          ref={refs}\n          style={props.style}\n          role=\"button\"\n          tabIndex={-1}\n          title={title.current}\n        >\n          <Ellipsis />\n        </div>\n      );\n    },\n  ),\n);\n"]}

package/lib/cjs/appui-react/statusbar/Overflow.scss

@@ -1,28 +1,28 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-.uifw-statusbar-overflow {
-  height: 100%;
-  width: 3em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  cursor: pointer;
-  flex-shrink: 0;
-
-  &:hover {
-    background: $buic-background-2;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &.nz-hidden {
-    visibility: hidden;
-  }
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.uifw-statusbar-overflow {
+  height: 100%;
+  width: 3em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    background: $buic-background-2;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.nz-hidden {
+    visibility: hidden;
+  }
 }

package/lib/cjs/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