@itwin/appui-react 3.7.3 → 3.7.4

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

@@ -1,42 +1,42 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.uifw-statusFields-promptField {
-  $font-size-medium: 12px;
-  $font-size-small: $font-size-medium;
-
-  overflow: hidden;
-
-  &.nz-footer-mode {
-    width: 20em;
-  }
-
-  &:not(.nz-footer-mode) {
-    width: 16em;
-  }
-
-  @media only screen and (max-width: 768px) {
-    font-size: $font-size-medium;
-
-    &.nz-footer-mode {
-      width: 12em;
-    }
-
-    &:not(.nz-footer-mode) {
-      width: 10em;
-    }
-  }
-
-  @media only screen and (max-width: 600px) {
-    font-size: $font-size-small;
-
-    &.nz-footer-mode {
-      width: 10em;
-    }
-
-    &:not(.nz-footer-mode) {
-      width: 8em;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.uifw-statusFields-promptField {
+  $font-size-medium: 12px;
+  $font-size-small: $font-size-medium;
+
+  overflow: hidden;
+
+  &.nz-footer-mode {
+    width: 20em;
+  }
+
+  &:not(.nz-footer-mode) {
+    width: 16em;
+  }
+
+  @media only screen and (max-width: 768px) {
+    font-size: $font-size-medium;
+
+    &.nz-footer-mode {
+      width: 12em;
+    }
+
+    &:not(.nz-footer-mode) {
+      width: 10em;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    font-size: $font-size-small;
+
+    &.nz-footer-mode {
+      width: 10em;
+    }
+
+    &:not(.nz-footer-mode) {
+      width: 8em;
+    }
+  }
+}

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

@@ -1,17 +1,17 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-/// <reference types="react" />
-import "./SectionsField.scss";
-import { StatusFieldProps } from "./StatusFieldProps";
-/** Sections Status Field Props
- * @beta
- */
-export interface SectionsStatusFieldProps extends StatusFieldProps {
-    hideWhenUnused?: boolean;
-}
-/** Status Field for showing section extra tools for clearing and showing manipulators
- * @beta
- */
-export declare function SectionsStatusField(props: SectionsStatusFieldProps): JSX.Element;
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import "./SectionsField.scss";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Sections Status Field Props
+ * @beta
+ */
+export interface SectionsStatusFieldProps extends StatusFieldProps {
+    hideWhenUnused?: boolean;
+}
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+export declare function SectionsStatusField(props: SectionsStatusFieldProps): JSX.Element;
 //# sourceMappingURL=SectionsField.d.ts.map

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

@@ -1,81 +1,81 @@
-"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.SectionsStatusField = void 0;
-require("./SectionsField.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const core_frontend_1 = require("@itwin/core-frontend");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const useActiveViewport_1 = require("../hooks/useActiveViewport");
-const UiFramework_1 = require("../UiFramework");
-const Indicator_1 = require("./Indicator");
-const Dialog_1 = require("../statusbar/dialog/Dialog");
-/** Status Field for showing section extra tools for clearing and showing manipulators
- * @beta
- */
-function SectionsStatusField(props) {
-    var _a;
-    const [toolTip] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionTools"));
-    const [clearLabel] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionClear"));
-    const [showHandlesLabel] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionShowHandles"));
-    const activeViewport = (0, useActiveViewport_1.useActiveViewport)();
-    const [showIndicator, setShowIndicator] = React.useState(false);
-    const [isPopupOpen, setPopupOpen] = React.useState(false);
-    const targetDiv = React.useRef(null);
-    const classes = (showIndicator) ? "uifw-indicator-fade-in" : "uifw-indicator-fade-out";
-    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
-    React.useEffect(() => {
-        // istanbul ignore next
-        const onClipChanged = (viewport, _eventType, _provider) => {
-            if (viewport !== activeViewport)
-                return;
-            setHasManipulatorsShown(!!core_frontend_1.ViewClipDecoration.get(activeViewport));
-            const isClipActive = !!activeViewport.view.getViewClip();
-            setShowIndicator(isClipActive || !props.hideWhenUnused);
-        };
-        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
-        setShowIndicator(clipActive || !props.hideWhenUnused);
-        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!core_frontend_1.ViewClipDecoration.get(activeViewport));
-        core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
-        return () => {
-            // Get or create static ViewClipDecorationProvider
-            core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
-        };
-    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
-    // istanbul ignore next
-    const toggleManipulators = async (e) => {
-        if (activeViewport) {
-            setHasManipulatorsShown(e.target.checked);
-            await core_frontend_1.ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
-        }
-    };
-    // istanbul ignore next
-    const handleClear = async () => {
-        await core_frontend_1.IModelApp.tools.run(core_frontend_1.ViewClipClearTool.toolId, core_frontend_1.ViewClipDecorationProvider.create());
-        setPopupOpen(false);
-    };
-    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: targetDiv, title: toolTip },
-                React.createElement(Indicator_1.Indicator, { className: classes, iconName: "icon-section-tool", onClick: () => setPopupOpen(!isPopupOpen), opened: isPopupOpen, 
-                    // eslint-disable-next-line deprecation/deprecation
-                    isInFooterMode: (_a = props.isInFooterMode) !== null && _a !== void 0 ? _a : true })),
-            React.createElement(appui_layout_react_1.FooterPopup // eslint-disable-line deprecation/deprecation
-            , { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
-                React.createElement(Dialog_1.StatusBarDialog, { titleBar: React.createElement(Dialog_1.StatusBarDialog.TitleBar, { title: toolTip }) },
-                    React.createElement("div", { className: "uifw-sections-footer-contents" },
-                        React.createElement(itwinui_react_1.Button, { onClick: handleClear }, clearLabel),
-                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
-                            React.createElement("div", { className: (0, classnames_1.default)("uifw-sections-label") }, showHandlesLabel),
-                            React.createElement(itwinui_react_1.ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
-}
-exports.SectionsStatusField = SectionsStatusField;
+"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.SectionsStatusField = void 0;
+require("./SectionsField.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const useActiveViewport_1 = require("../hooks/useActiveViewport");
+const UiFramework_1 = require("../UiFramework");
+const Indicator_1 = require("./Indicator");
+const Dialog_1 = require("../statusbar/dialog/Dialog");
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+function SectionsStatusField(props) {
+    var _a;
+    const [toolTip] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionTools"));
+    const [clearLabel] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionClear"));
+    const [showHandlesLabel] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionShowHandles"));
+    const activeViewport = (0, useActiveViewport_1.useActiveViewport)();
+    const [showIndicator, setShowIndicator] = React.useState(false);
+    const [isPopupOpen, setPopupOpen] = React.useState(false);
+    const targetDiv = React.useRef(null);
+    const classes = (showIndicator) ? "uifw-indicator-fade-in" : "uifw-indicator-fade-out";
+    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
+    React.useEffect(() => {
+        // istanbul ignore next
+        const onClipChanged = (viewport, _eventType, _provider) => {
+            if (viewport !== activeViewport)
+                return;
+            setHasManipulatorsShown(!!core_frontend_1.ViewClipDecoration.get(activeViewport));
+            const isClipActive = !!activeViewport.view.getViewClip();
+            setShowIndicator(isClipActive || !props.hideWhenUnused);
+        };
+        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
+        setShowIndicator(clipActive || !props.hideWhenUnused);
+        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!core_frontend_1.ViewClipDecoration.get(activeViewport));
+        core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
+        return () => {
+            // Get or create static ViewClipDecorationProvider
+            core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
+        };
+    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
+    // istanbul ignore next
+    const toggleManipulators = async (e) => {
+        if (activeViewport) {
+            setHasManipulatorsShown(e.target.checked);
+            await core_frontend_1.ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
+        }
+    };
+    // istanbul ignore next
+    const handleClear = async () => {
+        await core_frontend_1.IModelApp.tools.run(core_frontend_1.ViewClipClearTool.toolId, core_frontend_1.ViewClipDecorationProvider.create());
+        setPopupOpen(false);
+    };
+    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: targetDiv, title: toolTip },
+                React.createElement(Indicator_1.Indicator, { className: classes, iconName: "icon-section-tool", onClick: () => setPopupOpen(!isPopupOpen), opened: isPopupOpen, 
+                    // eslint-disable-next-line deprecation/deprecation
+                    isInFooterMode: (_a = props.isInFooterMode) !== null && _a !== void 0 ? _a : true })),
+            React.createElement(appui_layout_react_1.FooterPopup // eslint-disable-line deprecation/deprecation
+            , { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
+                React.createElement(Dialog_1.StatusBarDialog, { titleBar: React.createElement(Dialog_1.StatusBarDialog.TitleBar, { title: toolTip }) },
+                    React.createElement("div", { className: "uifw-sections-footer-contents" },
+                        React.createElement(itwinui_react_1.Button, { onClick: handleClear }, clearLabel),
+                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
+                            React.createElement("div", { className: (0, classnames_1.default)("uifw-sections-label") }, showHandlesLabel),
+                            React.createElement(itwinui_react_1.ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
+}
+exports.SectionsStatusField = SectionsStatusField;
 //# sourceMappingURL=SectionsField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SectionsField.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\nimport { FooterPopup } from \"@itwin/appui-layout-react\";\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\nimport { UiFramework } from \"../UiFramework\";\nimport { Indicator } from \"./Indicator\";\nimport { StatusFieldProps } from \"./StatusFieldProps\";\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\n\n/** Sections Status Field Props\n * @beta\n */\nexport interface SectionsStatusFieldProps extends StatusFieldProps {\n  hideWhenUnused?: boolean;\n}\n\n/** Status Field for showing section extra tools for clearing and showing manipulators\n * @beta\n */\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\n  const [toolTip] = React.useState(UiFramework.translate(\"tools.sectionTools\"));\n  const [clearLabel] = React.useState(UiFramework.translate(\"tools.sectionClear\"));\n  const [showHandlesLabel] = React.useState(UiFramework.translate(\"tools.sectionShowHandles\"));\n  const activeViewport = useActiveViewport();\n  const [showIndicator, setShowIndicator] = React.useState(false);\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\n  const targetDiv = React.useRef<HTMLDivElement>(null);\n  const classes = (showIndicator) ? \"uifw-indicator-fade-in\" : \"uifw-indicator-fade-out\";\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\n\n  React.useEffect(() => {\n    // istanbul ignore next\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\n      if (viewport !== activeViewport)\n        return;\n\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\n      const isClipActive = !!activeViewport.view.getViewClip();\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\n    };\n\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\n    setShowIndicator(clipActive || !props.hideWhenUnused);\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\n\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\n    return () => {\n      // Get or create static ViewClipDecorationProvider\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\n    };\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\n\n  // istanbul ignore next\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeViewport) {\n      setHasManipulatorsShown(e.target.checked);\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\n    }\n  };\n\n  // istanbul ignore next\n  const handleClear = async () => {\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\n    setPopupOpen(false);\n  };\n\n  return (\n    <div className=\"uifw-section-footer-popup-container\">\n      {showIndicator &&\n        <>\n          <div ref={targetDiv} title={toolTip}>\n            <Indicator className={classes} // eslint-disable-line deprecation/deprecation\n              iconName=\"icon-section-tool\"\n              onClick={() => setPopupOpen(!isPopupOpen)}\n              opened={isPopupOpen}\n              // eslint-disable-next-line deprecation/deprecation\n              isInFooterMode={props.isInFooterMode ?? true}\n            />\n          </div>\n          <FooterPopup // eslint-disable-line deprecation/deprecation\n            target={targetDiv.current}\n            onClose={() => setPopupOpen(false)}\n            isOpen={isPopupOpen}>\n            <StatusBarDialog\n              titleBar={\n                <StatusBarDialog.TitleBar title={toolTip} />\n              }>\n              <div className=\"uifw-sections-footer-contents\">\n                <Button onClick={handleClear}>{clearLabel}</Button>\n                <div className=\"uifw-uifw-sections-toggle-container\">\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\n                </div>\n              </div>\n            </StatusBarDialog>\n          </FooterPopup>\n        </>\n      }\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"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","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 \"./SectionsField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\r\nimport { FooterPopup } from \"@itwin/appui-layout-react\";\r\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\r\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { Indicator } from \"./Indicator\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\r\n\r\n/** Sections Status Field Props\r\n * @beta\r\n */\r\nexport interface SectionsStatusFieldProps extends StatusFieldProps {\r\n  hideWhenUnused?: boolean;\r\n}\r\n\r\n/** Status Field for showing section extra tools for clearing and showing manipulators\r\n * @beta\r\n */\r\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\r\n  const [toolTip] = React.useState(UiFramework.translate(\"tools.sectionTools\"));\r\n  const [clearLabel] = React.useState(UiFramework.translate(\"tools.sectionClear\"));\r\n  const [showHandlesLabel] = React.useState(UiFramework.translate(\"tools.sectionShowHandles\"));\r\n  const activeViewport = useActiveViewport();\r\n  const [showIndicator, setShowIndicator] = React.useState(false);\r\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\r\n  const targetDiv = React.useRef<HTMLDivElement>(null);\r\n  const classes = (showIndicator) ? \"uifw-indicator-fade-in\" : \"uifw-indicator-fade-out\";\r\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore next\r\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\r\n      if (viewport !== activeViewport)\r\n        return;\r\n\r\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\r\n      const isClipActive = !!activeViewport.view.getViewClip();\r\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\r\n    };\r\n\r\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\r\n    setShowIndicator(clipActive || !props.hideWhenUnused);\r\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\r\n\r\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\r\n    return () => {\r\n      // Get or create static ViewClipDecorationProvider\r\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\r\n    };\r\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\r\n\r\n  // istanbul ignore next\r\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (activeViewport) {\r\n      setHasManipulatorsShown(e.target.checked);\r\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  const handleClear = async () => {\r\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\r\n    setPopupOpen(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"uifw-section-footer-popup-container\">\r\n      {showIndicator &&\r\n        <>\r\n          <div ref={targetDiv} title={toolTip}>\r\n            <Indicator className={classes} // eslint-disable-line deprecation/deprecation\r\n              iconName=\"icon-section-tool\"\r\n              onClick={() => setPopupOpen(!isPopupOpen)}\r\n              opened={isPopupOpen}\r\n              // eslint-disable-next-line deprecation/deprecation\r\n              isInFooterMode={props.isInFooterMode ?? true}\r\n            />\r\n          </div>\r\n          <FooterPopup // eslint-disable-line deprecation/deprecation\r\n            target={targetDiv.current}\r\n            onClose={() => setPopupOpen(false)}\r\n            isOpen={isPopupOpen}>\r\n            <StatusBarDialog\r\n              titleBar={\r\n                <StatusBarDialog.TitleBar title={toolTip} />\r\n              }>\r\n              <div className=\"uifw-sections-footer-contents\">\r\n                <Button onClick={handleClear}>{clearLabel}</Button>\r\n                <div className=\"uifw-uifw-sections-toggle-container\">\r\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\r\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\r\n                </div>\r\n              </div>\r\n            </StatusBarDialog>\r\n          </FooterPopup>\r\n        </>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}

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

@@ -1,37 +1,37 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/space";
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.uifw-sections-footer-contents {
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  padding: 8px;
-}
-
-.uifw-uifw-sections-toggle-container {
-  display: flex;
-  margin: $iui-xs;
-  justify-content: center;
-}
-
-.uifw-sections-toggle {
-  align-self: center;
-  margin-right: $iui-s;
-}
-
-.uifw-sections-label {
-  @include iui-font-family;
-  color: $buic-text-color;
-  font-size: $iui-font-size;
-  align-self: center;
-  margin: $iui-s;
-
-  &.disabled {
-    color: $buic-text-color-disabled;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.uifw-sections-footer-contents {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  padding: 8px;
+}
+
+.uifw-uifw-sections-toggle-container {
+  display: flex;
+  margin: $iui-xs;
+  justify-content: center;
+}
+
+.uifw-sections-toggle {
+  align-self: center;
+  margin-right: $iui-s;
+}
+
+.uifw-sections-label {
+  @include iui-font-family;
+  color: $buic-text-color;
+  font-size: $iui-font-size;
+  align-self: center;
+  margin: $iui-s;
+
+  &.disabled {
+    color: $buic-text-color-disabled;
+  }
 }

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

@@ -1,27 +1,27 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SelectionInfo.scss";
-import * as React from "react";
-import { StatusFieldProps } from "./StatusFieldProps";
-/** Defines properties supported by the SelectionInfo Field Component.
- */
-interface SelectionInfoFieldProps extends StatusFieldProps {
-    selectionCount: number;
-}
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- */
-declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
-    constructor(props: SelectionInfoFieldProps);
-    render(): React.ReactNode;
-}
-/**
- * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * This React component is Redux connected.
- * @public
- */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionInfo.scss";
+import * as React from "react";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Defines properties supported by the SelectionInfo Field Component.
+ */
+interface SelectionInfoFieldProps extends StatusFieldProps {
+    selectionCount: number;
+}
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
+    constructor(props: SelectionInfoFieldProps);
+    render(): React.ReactNode;
+}
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
+export {};
 //# sourceMappingURL=SelectionInfo.d.ts.map

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

@@ -1,52 +1,52 @@
-"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.SelectionInfoField = void 0;
-require("./SelectionInfo.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const react_redux_1 = require("react-redux");
-const core_react_1 = require("@itwin/core-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const UiFramework_1 = require("../UiFramework");
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- */
-class SelectionInfoFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        var _a;
-        return (React.createElement(appui_layout_react_1.FooterIndicator // eslint-disable-line deprecation/deprecation
-        , { className: (0, classnames_1.default)("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style, 
-            // eslint-disable-next-line deprecation/deprecation
-            isInFooterMode: (_a = this.props.isInFooterMode) !== null && _a !== void 0 ? _a : true },
-            React.createElement(core_react_1.Icon, { iconSpec: "icon-cursor" }),
-            this.props.selectionCount.toString()));
-    }
-}
-/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
-function mapStateToProps(state) {
-    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
-    /* istanbul ignore next */
-    if (!frameworkState)
-        return undefined;
-    return { selectionCount: frameworkState.sessionState.numItemsSelected };
-}
-// we declare the variable and export that rather than using export default.
-/**
- * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * This React component is Redux connected.
- * @public
- */ // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.SelectionInfoField = (0, react_redux_1.connect)(mapStateToProps)(SelectionInfoFieldComponent);
+"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.SelectionInfoField = void 0;
+require("./SelectionInfo.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_redux_1 = require("react-redux");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const UiFramework_1 = require("../UiFramework");
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+class SelectionInfoFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        var _a;
+        return (React.createElement(appui_layout_react_1.FooterIndicator // eslint-disable-line deprecation/deprecation
+        , { className: (0, classnames_1.default)("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style, 
+            // eslint-disable-next-line deprecation/deprecation
+            isInFooterMode: (_a = this.props.isInFooterMode) !== null && _a !== void 0 ? _a : true },
+            React.createElement(core_react_1.Icon, { iconSpec: "icon-cursor" }),
+            this.props.selectionCount.toString()));
+    }
+}
+/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
+function mapStateToProps(state) {
+    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { selectionCount: frameworkState.sessionState.numItemsSelected };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+exports.SelectionInfoField = (0, react_redux_1.connect)(mapStateToProps)(SelectionInfoFieldComponent);
 //# sourceMappingURL=SelectionInfo.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kDAAyC;AACzC,kEAA4D;AAC5D,gDAA6C;AAS7C;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;;QACpB,OAAO,CACL,oBAAC,oCAAe,CAAC,8CAA8C;YAC7D,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,mDAAmD;YACnD,cAAc,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,cAAc,mCAAI,IAAI;YAEhD,oBAAC,iBAAI,IAAC,QAAQ,EAAE,aAAa,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,kBAAkB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,2BAA2B,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SelectionInfo.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Icon } from \"@itwin/core-react\";\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport { StatusFieldProps } from \"./StatusFieldProps\";\n\n/** Defines properties supported by the SelectionInfo Field Component.\n */\ninterface SelectionInfoFieldProps extends StatusFieldProps {\n  selectionCount: number;\n}\n\n/**\n * Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n */\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\n\n  constructor(props: SelectionInfoFieldProps) {\n    super(props);\n  }\n\n  public override render(): React.ReactNode {\n    return (\n      <FooterIndicator // eslint-disable-line deprecation/deprecation\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\n        style={this.props.style}\n        // eslint-disable-next-line deprecation/deprecation\n        isInFooterMode={this.props.isInFooterMode ?? true}\n      >\n        {<Icon iconSpec={\"icon-cursor\"} />}\n        {this.props.selectionCount.toString()}\n      </FooterIndicator>\n    );\n  }\n}\n\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\nfunction mapStateToProps(state: any) {\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\n  /* istanbul ignore next */\n  if (!frameworkState)\n    return undefined;\n\n  return { selectionCount: frameworkState.sessionState.numItemsSelected };\n}\n\n// we declare the variable and export that rather than using export default.\n/**\n * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n * This React component is Redux connected.\n * @public\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\n"]}
+{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kDAAyC;AACzC,kEAA4D;AAC5D,gDAA6C;AAS7C;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;;QACpB,OAAO,CACL,oBAAC,oCAAe,CAAC,8CAA8C;YAC7D,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,mDAAmD;YACnD,cAAc,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,cAAc,mCAAI,IAAI;YAEhD,oBAAC,iBAAI,IAAC,QAAQ,EAAE,aAAa,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,kBAAkB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,2BAA2B,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 \"./SelectionInfo.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Defines properties supported by the SelectionInfo Field Component.\r\n */\r\ninterface SelectionInfoFieldProps extends StatusFieldProps {\r\n  selectionCount: number;\r\n}\r\n\r\n/**\r\n * Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n */\r\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\r\n\r\n  constructor(props: SelectionInfoFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <FooterIndicator // eslint-disable-line deprecation/deprecation\r\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\r\n        style={this.props.style}\r\n        // eslint-disable-next-line deprecation/deprecation\r\n        isInFooterMode={this.props.isInFooterMode ?? true}\r\n      >\r\n        {<Icon iconSpec={\"icon-cursor\"} />}\r\n        {this.props.selectionCount.toString()}\r\n      </FooterIndicator>\r\n    );\r\n  }\r\n}\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { selectionCount: frameworkState.sessionState.numItemsSelected };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\r\n"]}

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

@@ -1,15 +1,15 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-.uifw-statusFields-selectionInfo {
-  .icon {
-    color: $icon-color;
-    font-size: $icon-size;
-    padding-right: 4px;
-  }
-
-  min-width: 6em;
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.uifw-statusFields-selectionInfo {
+  .icon {
+    color: $icon-color;
+    font-size: $icon-size;
+    padding-right: 4px;
+  }
+
+  min-width: 6em;
 }