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

package/lib/cjs/appui-react/settings/quantityformatting/UnitSystemSelector.js

@@ -1,54 +1,54 @@
-"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 Settings
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnitSystemSelector = void 0;
-const React = require("react");
-const UiFramework_1 = require("../../UiFramework");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** Select control to set the "active" Presentation Unit System. This setting determine what units are display for quantity values (i.e. foot vs meter).
- * @alpha
- */
-function UnitSystemSelector(props) {
-    const label = React.useRef(UiFramework_1.UiFramework.translate("presentationUnitSystem.selector-label"));
-    const { selectedUnitSystemKey, onUnitSystemSelected, availableUnitSystems } = props;
-    const handleUnitSystemSelected = React.useCallback((newValue) => {
-        onUnitSystemSelected && onUnitSystemSelected(newValue);
-    }, [onUnitSystemSelected]);
-    const displayUnitSystems = [...availableUnitSystems.values()].map((sys) => {
-        switch (sys) {
-            case "imperial":
-                return {
-                    value: "imperial",
-                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.BritishImperial"),
-                };
-            case "usCustomary":
-                return {
-                    value: "usCustomary",
-                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.USCustomary"),
-                };
-            case "usSurvey":
-                return {
-                    value: "usSurvey",
-                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.USSurvey"),
-                };
-            case "metric":
-            default:
-                return {
-                    value: "metric",
-                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.Metric"),
-                };
-        }
-    });
-    const unitSystemKey = availableUnitSystems.has(selectedUnitSystemKey) ? selectedUnitSystemKey : displayUnitSystems[0].value;
-    return (React.createElement("div", { className: "quantity-unit-system-selector-container" },
-        React.createElement("span", { className: "uicore-label" }, label.current),
-        React.createElement(itwinui_react_1.Select, { "data-testid": "unitSystemSelector", value: unitSystemKey, options: displayUnitSystems, onChange: handleUnitSystemSelected, size: "small" })));
-}
-exports.UnitSystemSelector = UnitSystemSelector;
+"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 Settings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnitSystemSelector = void 0;
+const React = require("react");
+const UiFramework_1 = require("../../UiFramework");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** Select control to set the "active" Presentation Unit System. This setting determine what units are display for quantity values (i.e. foot vs meter).
+ * @alpha
+ */
+function UnitSystemSelector(props) {
+    const label = React.useRef(UiFramework_1.UiFramework.translate("presentationUnitSystem.selector-label"));
+    const { selectedUnitSystemKey, onUnitSystemSelected, availableUnitSystems } = props;
+    const handleUnitSystemSelected = React.useCallback((newValue) => {
+        onUnitSystemSelected && onUnitSystemSelected(newValue);
+    }, [onUnitSystemSelected]);
+    const displayUnitSystems = [...availableUnitSystems.values()].map((sys) => {
+        switch (sys) {
+            case "imperial":
+                return {
+                    value: "imperial",
+                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.BritishImperial"),
+                };
+            case "usCustomary":
+                return {
+                    value: "usCustomary",
+                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.USCustomary"),
+                };
+            case "usSurvey":
+                return {
+                    value: "usSurvey",
+                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.USSurvey"),
+                };
+            case "metric":
+            default:
+                return {
+                    value: "metric",
+                    label: UiFramework_1.UiFramework.translate("presentationUnitSystem.Metric"),
+                };
+        }
+    });
+    const unitSystemKey = availableUnitSystems.has(selectedUnitSystemKey) ? selectedUnitSystemKey : displayUnitSystems[0].value;
+    return (React.createElement("div", { className: "quantity-unit-system-selector-container" },
+        React.createElement("span", { className: "uicore-label" }, label.current),
+        React.createElement(itwinui_react_1.Select, { "data-testid": "unitSystemSelector", value: unitSystemKey, options: displayUnitSystems, onChange: handleUnitSystemSelected, size: "small" })));
+}
+exports.UnitSystemSelector = UnitSystemSelector;
 //# sourceMappingURL=UnitSystemSelector.js.map

package/lib/cjs/appui-react/settings/ui/UiSettingsPage.d.ts

@@ -1,28 +1,28 @@
-/** @packageDocumentation
- * @module Settings
- */
-/// <reference types="react" />
-import "./UiSettingsPage.scss";
-import { SettingsTabEntry } from "@itwin/core-react";
-/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.
- *
- * - theme - Dark, Light, or based on OS preference.
- * - auto hide - Starts a timer and blanks out ui components that overlay content if there is no mouse movement for a period of time.
- * - drag interaction - If set, toolbar group buttons require a press and drag or a long press to open. In this mode a child action
- * item is shown as the group button and is activated when button is clicked. If a different child item is selected, it becomes the
- * active group button item.
- * - use proximity - Changes the opacity of toolbar from transparent to opaque as the mouse moves closer.
- * - snap widget opacity - triggers an abrupt change from transparent to opaque for tool and navigation widgets, instead of a gradual change based on mouse location.
- * - widget opacity - determines how transparent floating widgets in V2 and all widgets in V1 become when the mouse in not in them.
- * - UI version - if allowed by props, the UI version can be toggled between V1 and V2.
- *
- * @beta
- */
-export declare function UiSettingsPage(): JSX.Element;
-/**
- * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
- * @param itemPriority - Used to define the order of the entry in the Settings Stage
- * @beta
- */
-export declare function getUiSettingsManagerEntry(itemPriority: number): SettingsTabEntry;
+/** @packageDocumentation
+ * @module Settings
+ */
+/// <reference types="react" />
+import "./UiSettingsPage.scss";
+import { SettingsTabEntry } from "@itwin/core-react";
+/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.
+ *
+ * - theme - Dark, Light, or based on OS preference.
+ * - auto hide - Starts a timer and blanks out ui components that overlay content if there is no mouse movement for a period of time.
+ * - drag interaction - If set, toolbar group buttons require a press and drag or a long press to open. In this mode a child action
+ * item is shown as the group button and is activated when button is clicked. If a different child item is selected, it becomes the
+ * active group button item.
+ * - use proximity - Changes the opacity of toolbar from transparent to opaque as the mouse moves closer.
+ * - snap widget opacity - triggers an abrupt change from transparent to opaque for tool and navigation widgets, instead of a gradual change based on mouse location.
+ * - widget opacity - determines how transparent floating widgets in V2 and all widgets in V1 become when the mouse in not in them.
+ * - UI version - if allowed by props, the UI version can be toggled between V1 and V2.
+ *
+ * @beta
+ */
+export declare function UiSettingsPage(): JSX.Element;
+/**
+ * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
+ * @param itemPriority - Used to define the order of the entry in the Settings Stage
+ * @beta
+ */
+export declare function getUiSettingsManagerEntry(itemPriority: number): SettingsTabEntry;
 //# sourceMappingURL=UiSettingsPage.d.ts.map

package/lib/cjs/appui-react/settings/ui/UiSettingsPage.js

@@ -1,193 +1,193 @@
-"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 Settings
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUiSettingsManagerEntry = exports.UiSettingsPage = void 0;
-// cSpell:ignore configurableui checkmark
-const window_settings_svg_1 = require("@bentley/icons-generic/icons/window-settings.svg");
-require("./UiSettingsPage.scss");
-const React = require("react");
-const UiFramework_1 = require("../../UiFramework");
-const ThemeManager_1 = require("../../theme/ThemeManager");
-const SyncUiEventDispatcher_1 = require("../../syncui/SyncUiEventDispatcher");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.
- *
- * - theme - Dark, Light, or based on OS preference.
- * - auto hide - Starts a timer and blanks out ui components that overlay content if there is no mouse movement for a period of time.
- * - drag interaction - If set, toolbar group buttons require a press and drag or a long press to open. In this mode a child action
- * item is shown as the group button and is activated when button is clicked. If a different child item is selected, it becomes the
- * active group button item.
- * - use proximity - Changes the opacity of toolbar from transparent to opaque as the mouse moves closer.
- * - snap widget opacity - triggers an abrupt change from transparent to opaque for tool and navigation widgets, instead of a gradual change based on mouse location.
- * - widget opacity - determines how transparent floating widgets in V2 and all widgets in V1 become when the mouse in not in them.
- * - UI version - if allowed by props, the UI version can be toggled between V1 and V2.
- *
- * @beta
- */
-function UiSettingsPage() {
-    const themeTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.themeTitle"));
-    const themeDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.themeDescription"));
-    const autoHideTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoHideTitle"));
-    const autoHideDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoHideDescription"));
-    const dragInteractionTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dragInteractionTitle"));
-    const dragInteractionDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dragInteractionDescription"));
-    const useProximityOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useProximityOpacityTitle"));
-    const useProximityOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useProximityOpacityDescription"));
-    const snapWidgetOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityTitle"));
-    const snapWidgetOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityDescription"));
-    const darkLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dark"));
-    const lightLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.light"));
-    const systemPreferredLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.systemPreferred"));
-    const widgetOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetOpacityTitle"));
-    const widgetOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetOpacityDescription"));
-    const widgetIconTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetIconTitle"));
-    const widgetIconDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetIconDescription"));
-    const autoCollapseUnpinnedPanelsTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"));
-    const autoCollapseUnpinnedPanelsDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"));
-    const animateToolSettingsTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.animateToolSettingsTitle"));
-    const animateToolSettingsDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.animateToolSettingsDescription"));
-    const useToolAsToolSettingsLabelTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"));
-    const useToolAsToolSettingsLabelDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"));
-    const toolbarOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.toolbarOpacityTitle"));
-    const toolbarOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.toolbarOpacityDescription"));
-    const [theme, setTheme] = React.useState(() => UiFramework_1.UiFramework.getColorTheme());
-    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework_1.UiFramework.useDragInteraction);
-    const [showWidgetIcon, setShowWidgetIcon] = React.useState(() => UiFramework_1.UiFramework.showWidgetIcon);
-    const [autoCollapseUnpinnedPanels, setAutoCollapseUnpinnedPanels] = React.useState(() => UiFramework_1.UiFramework.autoCollapseUnpinnedPanels);
-    const [animateToolSettings, setAnimateToolSettings] = React.useState(() => UiFramework_1.UiFramework.animateToolSettings);
-    const [useToolAsToolSettingsLabel, setUseToolAsToolSettingsLabel] = React.useState(() => UiFramework_1.UiFramework.useToolAsToolSettingsLabel);
-    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework_1.UiFramework.getWidgetOpacity());
-    const [autoHideUi, setAutoHideUi] = React.useState(() => UiFramework_1.UiFramework.visibility.autoHideUi);
-    const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiFramework_1.UiFramework.visibility.useProximityOpacity);
-    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework_1.UiFramework.visibility.snapWidgetOpacity);
-    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => UiFramework_1.UiFramework.getToolbarOpacity());
-    React.useEffect(() => {
-        const syncIdsOfInterest = ["configurableui:set_theme", "configurableui:set_widget_opacity", "configurableui:set-show-widget-icon",
-            "configurableui:set-drag-interaction", "configurableui:set-framework-version",
-            "configurableui:set-auto-collapse-unpinned-panels", "configurableui:set-animate-tool-settings",
-            "configurableui:set-use-tool-as-tool-settings-label", "configurableui:set-toolbar-opacity", SyncUiEventDispatcher_1.SyncUiEventId.ShowHideManagerSettingChange];
-        const handleSyncUiEvent = (args) => {
-            // istanbul ignore else
-            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
-                if (UiFramework_1.UiFramework.getColorTheme() !== theme)
-                    setTheme(UiFramework_1.UiFramework.getColorTheme());
-                if (UiFramework_1.UiFramework.visibility.autoHideUi !== autoHideUi)
-                    setAutoHideUi(UiFramework_1.UiFramework.visibility.autoHideUi);
-                if (UiFramework_1.UiFramework.useDragInteraction !== useDragInteraction)
-                    setUseDragInteraction(UiFramework_1.UiFramework.useDragInteraction);
-                if (UiFramework_1.UiFramework.showWidgetIcon !== showWidgetIcon)
-                    setShowWidgetIcon(UiFramework_1.UiFramework.showWidgetIcon);
-                if (UiFramework_1.UiFramework.autoCollapseUnpinnedPanels !== autoCollapseUnpinnedPanels)
-                    setAutoCollapseUnpinnedPanels(UiFramework_1.UiFramework.autoCollapseUnpinnedPanels);
-                if (UiFramework_1.UiFramework.getWidgetOpacity() !== widgetOpacity)
-                    setWidgetOpacity(UiFramework_1.UiFramework.getWidgetOpacity());
-                if (UiFramework_1.UiFramework.visibility.autoHideUi !== autoHideUi)
-                    setAutoHideUi(UiFramework_1.UiFramework.visibility.autoHideUi);
-                if (UiFramework_1.UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
-                    setUseProximityOpacity(UiFramework_1.UiFramework.visibility.useProximityOpacity);
-                if (UiFramework_1.UiFramework.visibility.snapWidgetOpacity !== snapWidgetOpacity)
-                    setSnapWidgetOpacity(UiFramework_1.UiFramework.visibility.snapWidgetOpacity);
-                if (UiFramework_1.UiFramework.animateToolSettings !== animateToolSettings)
-                    setAnimateToolSettings(UiFramework_1.UiFramework.animateToolSettings);
-                if (UiFramework_1.UiFramework.useToolAsToolSettingsLabel !== useToolAsToolSettingsLabel)
-                    setUseToolAsToolSettingsLabel(UiFramework_1.UiFramework.useToolAsToolSettingsLabel);
-                if (UiFramework_1.UiFramework.getToolbarOpacity() !== toolbarOpacity)
-                    setToolbarOpacity(UiFramework_1.UiFramework.getToolbarOpacity());
-            }
-        };
-        return SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
-    }, [autoCollapseUnpinnedPanels, autoHideUi, showWidgetIcon, snapWidgetOpacity, theme,
-        useDragInteraction, useProximityOpacity, widgetOpacity, animateToolSettings, useToolAsToolSettingsLabel, toolbarOpacity]);
-    const defaultThemeOption = { label: systemPreferredLabel.current, value: ThemeManager_1.SYSTEM_PREFERRED_COLOR_THEME };
-    const themeOptions = [
-        defaultThemeOption,
-        { label: lightLabel.current, value: ThemeManager_1.ColorTheme.Light },
-        { label: darkLabel.current, value: ThemeManager_1.ColorTheme.Dark },
-    ];
-    const onThemeChange = React.useCallback((newValue) => {
-        UiFramework_1.UiFramework.setColorTheme(newValue);
-    }, []);
-    const onAutoHideChange = React.useCallback(async () => {
-        UiFramework_1.UiFramework.visibility.autoHideUi = !autoHideUi;
-    }, [autoHideUi]);
-    const onUseProximityOpacityChange = React.useCallback(async () => {
-        UiFramework_1.UiFramework.visibility.useProximityOpacity = !useProximityOpacity;
-    }, [useProximityOpacity]);
-    const onSnapWidgetOpacityChange = React.useCallback(async () => {
-        UiFramework_1.UiFramework.visibility.snapWidgetOpacity = !snapWidgetOpacity;
-    }, [snapWidgetOpacity]);
-    const onWidgetIconChange = React.useCallback(async () => {
-        UiFramework_1.UiFramework.setShowWidgetIcon(!showWidgetIcon);
-    }, [showWidgetIcon]);
-    const onAutoCollapseUnpinnedPanelsChange = React.useCallback(async () => {
-        UiFramework_1.UiFramework.setAutoCollapseUnpinnedPanels(!autoCollapseUnpinnedPanels);
-    }, [autoCollapseUnpinnedPanels]);
-    const onWidgetOpacityChange = React.useCallback(async (values) => {
-        // istanbul ignore else
-        if (values.length > 0) {
-            UiFramework_1.UiFramework.setWidgetOpacity(values[0]);
-        }
-    }, []);
-    const onToggleDragInteraction = React.useCallback(async () => {
-        UiFramework_1.UiFramework.setUseDragInteraction(!useDragInteraction);
-    }, [useDragInteraction]);
-    const OnToggleAnimateToolSettings = React.useCallback(async () => {
-        UiFramework_1.UiFramework.setAnimateToolSettings(!animateToolSettings);
-    }, [animateToolSettings]);
-    const currentTheme = UiFramework_1.UiFramework.getColorTheme();
-    const OnToggleUseToolAsToolSettingsLabel = React.useCallback(async () => {
-        UiFramework_1.UiFramework.setUseToolAsToolSettingsLabel(!useToolAsToolSettingsLabel);
-    }, [useToolAsToolSettingsLabel]);
-    const onToolbarOpacityChange = React.useCallback(async (values) => {
-        // istanbul ignore else
-        if (values.length > 0) {
-            UiFramework_1.UiFramework.setToolbarOpacity(values[0]);
-        }
-    }, []);
-    return (React.createElement("div", { className: "uifw-settings" },
-        React.createElement(SettingsItem, { title: themeTitle.current, description: themeDescription.current, settingUi: React.createElement("div", { "data-testid": "select-theme-container", className: "select-theme-container" },
-                React.createElement(itwinui_react_1.Select, { value: currentTheme, onChange: onThemeChange, options: themeOptions, "data-testid": "select-theme", size: "small" })) }),
-        React.createElement(SettingsItem, { title: autoHideTitle.current, description: autoHideDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
-        React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
-        React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
-        React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
-        React.createElement(SettingsItem, { title: widgetIconTitle.current, description: widgetIconDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
-        React.createElement(SettingsItem, { title: autoCollapseUnpinnedPanelsTitle.current, description: autoCollapseUnpinnedPanelsDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
-        React.createElement(SettingsItem, { title: animateToolSettingsTitle.current, description: animateToolSettingsDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
-        React.createElement(SettingsItem, { title: useToolAsToolSettingsLabelTitle.current, description: useToolAsToolSettingsLabelDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
-        React.createElement(SettingsItem, { title: toolbarOpacityTitle.current, description: toolbarOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.Slider, { style: { flex: "1" }, values: [toolbarOpacity], step: 0.05, onChange: onToolbarOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) }),
-        React.createElement(SettingsItem, { title: widgetOpacityTitle.current, description: widgetOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })));
-}
-exports.UiSettingsPage = UiSettingsPage;
-function SettingsItem(props) {
-    const { title, description, settingUi } = props;
-    return (React.createElement("div", { className: "uifw-settings-item" },
-        React.createElement("div", { className: "panel left-panel" },
-            React.createElement("span", { className: "title" }, title),
-            React.createElement("span", { className: "description" }, description)),
-        React.createElement("div", { className: "panel right-panel" }, settingUi)));
-}
-/**
- * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
- * @param itemPriority - Used to define the order of the entry in the Settings Stage
- * @beta
- */
-function getUiSettingsManagerEntry(itemPriority) {
-    return {
-        itemPriority, tabId: "uifw:UiStateStorage",
-        label: UiFramework_1.UiFramework.translate("settings.uiSettingsPage.label"),
-        icon: appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(window_settings_svg_1.default),
-        page: React.createElement(UiSettingsPage, null),
-        isDisabled: false,
-        tooltip: UiFramework_1.UiFramework.translate("settings.uiSettingsPage.tooltip"),
-    };
-}
-exports.getUiSettingsManagerEntry = getUiSettingsManagerEntry;
+"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 Settings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUiSettingsManagerEntry = exports.UiSettingsPage = void 0;
+// cSpell:ignore configurableui checkmark
+const window_settings_svg_1 = require("@bentley/icons-generic/icons/window-settings.svg");
+require("./UiSettingsPage.scss");
+const React = require("react");
+const UiFramework_1 = require("../../UiFramework");
+const ThemeManager_1 = require("../../theme/ThemeManager");
+const SyncUiEventDispatcher_1 = require("../../syncui/SyncUiEventDispatcher");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.
+ *
+ * - theme - Dark, Light, or based on OS preference.
+ * - auto hide - Starts a timer and blanks out ui components that overlay content if there is no mouse movement for a period of time.
+ * - drag interaction - If set, toolbar group buttons require a press and drag or a long press to open. In this mode a child action
+ * item is shown as the group button and is activated when button is clicked. If a different child item is selected, it becomes the
+ * active group button item.
+ * - use proximity - Changes the opacity of toolbar from transparent to opaque as the mouse moves closer.
+ * - snap widget opacity - triggers an abrupt change from transparent to opaque for tool and navigation widgets, instead of a gradual change based on mouse location.
+ * - widget opacity - determines how transparent floating widgets in V2 and all widgets in V1 become when the mouse in not in them.
+ * - UI version - if allowed by props, the UI version can be toggled between V1 and V2.
+ *
+ * @beta
+ */
+function UiSettingsPage() {
+    const themeTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.themeTitle"));
+    const themeDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.themeDescription"));
+    const autoHideTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoHideTitle"));
+    const autoHideDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoHideDescription"));
+    const dragInteractionTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dragInteractionTitle"));
+    const dragInteractionDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dragInteractionDescription"));
+    const useProximityOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useProximityOpacityTitle"));
+    const useProximityOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useProximityOpacityDescription"));
+    const snapWidgetOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityTitle"));
+    const snapWidgetOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityDescription"));
+    const darkLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dark"));
+    const lightLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.light"));
+    const systemPreferredLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.systemPreferred"));
+    const widgetOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetOpacityTitle"));
+    const widgetOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetOpacityDescription"));
+    const widgetIconTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetIconTitle"));
+    const widgetIconDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetIconDescription"));
+    const autoCollapseUnpinnedPanelsTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"));
+    const autoCollapseUnpinnedPanelsDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"));
+    const animateToolSettingsTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.animateToolSettingsTitle"));
+    const animateToolSettingsDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.animateToolSettingsDescription"));
+    const useToolAsToolSettingsLabelTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"));
+    const useToolAsToolSettingsLabelDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"));
+    const toolbarOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.toolbarOpacityTitle"));
+    const toolbarOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.toolbarOpacityDescription"));
+    const [theme, setTheme] = React.useState(() => UiFramework_1.UiFramework.getColorTheme());
+    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework_1.UiFramework.useDragInteraction);
+    const [showWidgetIcon, setShowWidgetIcon] = React.useState(() => UiFramework_1.UiFramework.showWidgetIcon);
+    const [autoCollapseUnpinnedPanels, setAutoCollapseUnpinnedPanels] = React.useState(() => UiFramework_1.UiFramework.autoCollapseUnpinnedPanels);
+    const [animateToolSettings, setAnimateToolSettings] = React.useState(() => UiFramework_1.UiFramework.animateToolSettings);
+    const [useToolAsToolSettingsLabel, setUseToolAsToolSettingsLabel] = React.useState(() => UiFramework_1.UiFramework.useToolAsToolSettingsLabel);
+    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework_1.UiFramework.getWidgetOpacity());
+    const [autoHideUi, setAutoHideUi] = React.useState(() => UiFramework_1.UiFramework.visibility.autoHideUi);
+    const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiFramework_1.UiFramework.visibility.useProximityOpacity);
+    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework_1.UiFramework.visibility.snapWidgetOpacity);
+    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => UiFramework_1.UiFramework.getToolbarOpacity());
+    React.useEffect(() => {
+        const syncIdsOfInterest = ["configurableui:set_theme", "configurableui:set_widget_opacity", "configurableui:set-show-widget-icon",
+            "configurableui:set-drag-interaction", "configurableui:set-framework-version",
+            "configurableui:set-auto-collapse-unpinned-panels", "configurableui:set-animate-tool-settings",
+            "configurableui:set-use-tool-as-tool-settings-label", "configurableui:set-toolbar-opacity", SyncUiEventDispatcher_1.SyncUiEventId.ShowHideManagerSettingChange];
+        const handleSyncUiEvent = (args) => {
+            // istanbul ignore else
+            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
+                if (UiFramework_1.UiFramework.getColorTheme() !== theme)
+                    setTheme(UiFramework_1.UiFramework.getColorTheme());
+                if (UiFramework_1.UiFramework.visibility.autoHideUi !== autoHideUi)
+                    setAutoHideUi(UiFramework_1.UiFramework.visibility.autoHideUi);
+                if (UiFramework_1.UiFramework.useDragInteraction !== useDragInteraction)
+                    setUseDragInteraction(UiFramework_1.UiFramework.useDragInteraction);
+                if (UiFramework_1.UiFramework.showWidgetIcon !== showWidgetIcon)
+                    setShowWidgetIcon(UiFramework_1.UiFramework.showWidgetIcon);
+                if (UiFramework_1.UiFramework.autoCollapseUnpinnedPanels !== autoCollapseUnpinnedPanels)
+                    setAutoCollapseUnpinnedPanels(UiFramework_1.UiFramework.autoCollapseUnpinnedPanels);
+                if (UiFramework_1.UiFramework.getWidgetOpacity() !== widgetOpacity)
+                    setWidgetOpacity(UiFramework_1.UiFramework.getWidgetOpacity());
+                if (UiFramework_1.UiFramework.visibility.autoHideUi !== autoHideUi)
+                    setAutoHideUi(UiFramework_1.UiFramework.visibility.autoHideUi);
+                if (UiFramework_1.UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
+                    setUseProximityOpacity(UiFramework_1.UiFramework.visibility.useProximityOpacity);
+                if (UiFramework_1.UiFramework.visibility.snapWidgetOpacity !== snapWidgetOpacity)
+                    setSnapWidgetOpacity(UiFramework_1.UiFramework.visibility.snapWidgetOpacity);
+                if (UiFramework_1.UiFramework.animateToolSettings !== animateToolSettings)
+                    setAnimateToolSettings(UiFramework_1.UiFramework.animateToolSettings);
+                if (UiFramework_1.UiFramework.useToolAsToolSettingsLabel !== useToolAsToolSettingsLabel)
+                    setUseToolAsToolSettingsLabel(UiFramework_1.UiFramework.useToolAsToolSettingsLabel);
+                if (UiFramework_1.UiFramework.getToolbarOpacity() !== toolbarOpacity)
+                    setToolbarOpacity(UiFramework_1.UiFramework.getToolbarOpacity());
+            }
+        };
+        return SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
+    }, [autoCollapseUnpinnedPanels, autoHideUi, showWidgetIcon, snapWidgetOpacity, theme,
+        useDragInteraction, useProximityOpacity, widgetOpacity, animateToolSettings, useToolAsToolSettingsLabel, toolbarOpacity]);
+    const defaultThemeOption = { label: systemPreferredLabel.current, value: ThemeManager_1.SYSTEM_PREFERRED_COLOR_THEME };
+    const themeOptions = [
+        defaultThemeOption,
+        { label: lightLabel.current, value: ThemeManager_1.ColorTheme.Light },
+        { label: darkLabel.current, value: ThemeManager_1.ColorTheme.Dark },
+    ];
+    const onThemeChange = React.useCallback((newValue) => {
+        UiFramework_1.UiFramework.setColorTheme(newValue);
+    }, []);
+    const onAutoHideChange = React.useCallback(async () => {
+        UiFramework_1.UiFramework.visibility.autoHideUi = !autoHideUi;
+    }, [autoHideUi]);
+    const onUseProximityOpacityChange = React.useCallback(async () => {
+        UiFramework_1.UiFramework.visibility.useProximityOpacity = !useProximityOpacity;
+    }, [useProximityOpacity]);
+    const onSnapWidgetOpacityChange = React.useCallback(async () => {
+        UiFramework_1.UiFramework.visibility.snapWidgetOpacity = !snapWidgetOpacity;
+    }, [snapWidgetOpacity]);
+    const onWidgetIconChange = React.useCallback(async () => {
+        UiFramework_1.UiFramework.setShowWidgetIcon(!showWidgetIcon);
+    }, [showWidgetIcon]);
+    const onAutoCollapseUnpinnedPanelsChange = React.useCallback(async () => {
+        UiFramework_1.UiFramework.setAutoCollapseUnpinnedPanels(!autoCollapseUnpinnedPanels);
+    }, [autoCollapseUnpinnedPanels]);
+    const onWidgetOpacityChange = React.useCallback(async (values) => {
+        // istanbul ignore else
+        if (values.length > 0) {
+            UiFramework_1.UiFramework.setWidgetOpacity(values[0]);
+        }
+    }, []);
+    const onToggleDragInteraction = React.useCallback(async () => {
+        UiFramework_1.UiFramework.setUseDragInteraction(!useDragInteraction);
+    }, [useDragInteraction]);
+    const OnToggleAnimateToolSettings = React.useCallback(async () => {
+        UiFramework_1.UiFramework.setAnimateToolSettings(!animateToolSettings);
+    }, [animateToolSettings]);
+    const currentTheme = UiFramework_1.UiFramework.getColorTheme();
+    const OnToggleUseToolAsToolSettingsLabel = React.useCallback(async () => {
+        UiFramework_1.UiFramework.setUseToolAsToolSettingsLabel(!useToolAsToolSettingsLabel);
+    }, [useToolAsToolSettingsLabel]);
+    const onToolbarOpacityChange = React.useCallback(async (values) => {
+        // istanbul ignore else
+        if (values.length > 0) {
+            UiFramework_1.UiFramework.setToolbarOpacity(values[0]);
+        }
+    }, []);
+    return (React.createElement("div", { className: "uifw-settings" },
+        React.createElement(SettingsItem, { title: themeTitle.current, description: themeDescription.current, settingUi: React.createElement("div", { "data-testid": "select-theme-container", className: "select-theme-container" },
+                React.createElement(itwinui_react_1.Select, { value: currentTheme, onChange: onThemeChange, options: themeOptions, "data-testid": "select-theme", size: "small" })) }),
+        React.createElement(SettingsItem, { title: autoHideTitle.current, description: autoHideDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
+        React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
+        React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
+        React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
+        React.createElement(SettingsItem, { title: widgetIconTitle.current, description: widgetIconDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
+        React.createElement(SettingsItem, { title: autoCollapseUnpinnedPanelsTitle.current, description: autoCollapseUnpinnedPanelsDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
+        React.createElement(SettingsItem, { title: animateToolSettingsTitle.current, description: animateToolSettingsDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
+        React.createElement(SettingsItem, { title: useToolAsToolSettingsLabelTitle.current, description: useToolAsToolSettingsLabelDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
+        React.createElement(SettingsItem, { title: toolbarOpacityTitle.current, description: toolbarOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.Slider, { style: { flex: "1" }, values: [toolbarOpacity], step: 0.05, onChange: onToolbarOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) }),
+        React.createElement(SettingsItem, { title: widgetOpacityTitle.current, description: widgetOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })));
+}
+exports.UiSettingsPage = UiSettingsPage;
+function SettingsItem(props) {
+    const { title, description, settingUi } = props;
+    return (React.createElement("div", { className: "uifw-settings-item" },
+        React.createElement("div", { className: "panel left-panel" },
+            React.createElement("span", { className: "title" }, title),
+            React.createElement("span", { className: "description" }, description)),
+        React.createElement("div", { className: "panel right-panel" }, settingUi)));
+}
+/**
+ * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
+ * @param itemPriority - Used to define the order of the entry in the Settings Stage
+ * @beta
+ */
+function getUiSettingsManagerEntry(itemPriority) {
+    return {
+        itemPriority, tabId: "uifw:UiStateStorage",
+        label: UiFramework_1.UiFramework.translate("settings.uiSettingsPage.label"),
+        icon: appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(window_settings_svg_1.default),
+        page: React.createElement(UiSettingsPage, null),
+        isDisabled: false,
+        tooltip: UiFramework_1.UiFramework.translate("settings.uiSettingsPage.tooltip"),
+    };
+}
+exports.getUiSettingsManagerEntry = getUiSettingsManagerEntry;
 //# sourceMappingURL=UiSettingsPage.js.map