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

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

@@ -1,50 +1,50 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { UiFramework } from "../../UiFramework";
-import { Select } from "@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
- */
-export function UnitSystemSelector(props) {
-    const label = React.useRef(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.translate("presentationUnitSystem.BritishImperial"),
-                };
-            case "usCustomary":
-                return {
-                    value: "usCustomary",
-                    label: UiFramework.translate("presentationUnitSystem.USCustomary"),
-                };
-            case "usSurvey":
-                return {
-                    value: "usSurvey",
-                    label: UiFramework.translate("presentationUnitSystem.USSurvey"),
-                };
-            case "metric":
-            default:
-                return {
-                    value: "metric",
-                    label: 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(Select, { "data-testid": "unitSystemSelector", value: unitSystemKey, options: displayUnitSystems, onChange: handleUnitSystemSelected, size: "small" })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { UiFramework } from "../../UiFramework";
+import { Select } from "@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
+ */
+export function UnitSystemSelector(props) {
+    const label = React.useRef(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.translate("presentationUnitSystem.BritishImperial"),
+                };
+            case "usCustomary":
+                return {
+                    value: "usCustomary",
+                    label: UiFramework.translate("presentationUnitSystem.USCustomary"),
+                };
+            case "usSurvey":
+                return {
+                    value: "usSurvey",
+                    label: UiFramework.translate("presentationUnitSystem.USSurvey"),
+                };
+            case "metric":
+            default:
+                return {
+                    value: "metric",
+                    label: 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(Select, { "data-testid": "unitSystemSelector", value: unitSystemKey, options: displayUnitSystems, onChange: handleUnitSystemSelected, size: "small" })));
+}
 //# sourceMappingURL=UnitSystemSelector.js.map

package/lib/esm/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/esm/appui-react/settings/ui/UiSettingsPage.js

@@ -1,188 +1,188 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-// cSpell:ignore configurableui checkmark
-import widowSettingsIconSvg from "@bentley/icons-generic/icons/window-settings.svg";
-import "./UiSettingsPage.scss";
-import * as React from "react";
-import { UiFramework } from "../../UiFramework";
-import { ColorTheme, SYSTEM_PREFERRED_COLOR_THEME } from "../../theme/ThemeManager";
-import { SyncUiEventDispatcher, SyncUiEventId } from "../../syncui/SyncUiEventDispatcher";
-import { IconSpecUtilities } from "@itwin/appui-abstract";
-import { Select, Slider, ToggleSwitch } from "@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
- */
-export function UiSettingsPage() {
-    const themeTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.themeTitle"));
-    const themeDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.themeDescription"));
-    const autoHideTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoHideTitle"));
-    const autoHideDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoHideDescription"));
-    const dragInteractionTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.dragInteractionTitle"));
-    const dragInteractionDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.dragInteractionDescription"));
-    const useProximityOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.useProximityOpacityTitle"));
-    const useProximityOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.useProximityOpacityDescription"));
-    const snapWidgetOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityTitle"));
-    const snapWidgetOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityDescription"));
-    const darkLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.dark"));
-    const lightLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.light"));
-    const systemPreferredLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.systemPreferred"));
-    const widgetOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetOpacityTitle"));
-    const widgetOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetOpacityDescription"));
-    const widgetIconTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetIconTitle"));
-    const widgetIconDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetIconDescription"));
-    const autoCollapseUnpinnedPanelsTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"));
-    const autoCollapseUnpinnedPanelsDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"));
-    const animateToolSettingsTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.animateToolSettingsTitle"));
-    const animateToolSettingsDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.animateToolSettingsDescription"));
-    const useToolAsToolSettingsLabelTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"));
-    const useToolAsToolSettingsLabelDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"));
-    const toolbarOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.toolbarOpacityTitle"));
-    const toolbarOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.toolbarOpacityDescription"));
-    const [theme, setTheme] = React.useState(() => UiFramework.getColorTheme());
-    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework.useDragInteraction);
-    const [showWidgetIcon, setShowWidgetIcon] = React.useState(() => UiFramework.showWidgetIcon);
-    const [autoCollapseUnpinnedPanels, setAutoCollapseUnpinnedPanels] = React.useState(() => UiFramework.autoCollapseUnpinnedPanels);
-    const [animateToolSettings, setAnimateToolSettings] = React.useState(() => UiFramework.animateToolSettings);
-    const [useToolAsToolSettingsLabel, setUseToolAsToolSettingsLabel] = React.useState(() => UiFramework.useToolAsToolSettingsLabel);
-    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework.getWidgetOpacity());
-    const [autoHideUi, setAutoHideUi] = React.useState(() => UiFramework.visibility.autoHideUi);
-    const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiFramework.visibility.useProximityOpacity);
-    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework.visibility.snapWidgetOpacity);
-    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => 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", SyncUiEventId.ShowHideManagerSettingChange];
-        const handleSyncUiEvent = (args) => {
-            // istanbul ignore else
-            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
-                if (UiFramework.getColorTheme() !== theme)
-                    setTheme(UiFramework.getColorTheme());
-                if (UiFramework.visibility.autoHideUi !== autoHideUi)
-                    setAutoHideUi(UiFramework.visibility.autoHideUi);
-                if (UiFramework.useDragInteraction !== useDragInteraction)
-                    setUseDragInteraction(UiFramework.useDragInteraction);
-                if (UiFramework.showWidgetIcon !== showWidgetIcon)
-                    setShowWidgetIcon(UiFramework.showWidgetIcon);
-                if (UiFramework.autoCollapseUnpinnedPanels !== autoCollapseUnpinnedPanels)
-                    setAutoCollapseUnpinnedPanels(UiFramework.autoCollapseUnpinnedPanels);
-                if (UiFramework.getWidgetOpacity() !== widgetOpacity)
-                    setWidgetOpacity(UiFramework.getWidgetOpacity());
-                if (UiFramework.visibility.autoHideUi !== autoHideUi)
-                    setAutoHideUi(UiFramework.visibility.autoHideUi);
-                if (UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
-                    setUseProximityOpacity(UiFramework.visibility.useProximityOpacity);
-                if (UiFramework.visibility.snapWidgetOpacity !== snapWidgetOpacity)
-                    setSnapWidgetOpacity(UiFramework.visibility.snapWidgetOpacity);
-                if (UiFramework.animateToolSettings !== animateToolSettings)
-                    setAnimateToolSettings(UiFramework.animateToolSettings);
-                if (UiFramework.useToolAsToolSettingsLabel !== useToolAsToolSettingsLabel)
-                    setUseToolAsToolSettingsLabel(UiFramework.useToolAsToolSettingsLabel);
-                if (UiFramework.getToolbarOpacity() !== toolbarOpacity)
-                    setToolbarOpacity(UiFramework.getToolbarOpacity());
-            }
-        };
-        return SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
-    }, [autoCollapseUnpinnedPanels, autoHideUi, showWidgetIcon, snapWidgetOpacity, theme,
-        useDragInteraction, useProximityOpacity, widgetOpacity, animateToolSettings, useToolAsToolSettingsLabel, toolbarOpacity]);
-    const defaultThemeOption = { label: systemPreferredLabel.current, value: SYSTEM_PREFERRED_COLOR_THEME };
-    const themeOptions = [
-        defaultThemeOption,
-        { label: lightLabel.current, value: ColorTheme.Light },
-        { label: darkLabel.current, value: ColorTheme.Dark },
-    ];
-    const onThemeChange = React.useCallback((newValue) => {
-        UiFramework.setColorTheme(newValue);
-    }, []);
-    const onAutoHideChange = React.useCallback(async () => {
-        UiFramework.visibility.autoHideUi = !autoHideUi;
-    }, [autoHideUi]);
-    const onUseProximityOpacityChange = React.useCallback(async () => {
-        UiFramework.visibility.useProximityOpacity = !useProximityOpacity;
-    }, [useProximityOpacity]);
-    const onSnapWidgetOpacityChange = React.useCallback(async () => {
-        UiFramework.visibility.snapWidgetOpacity = !snapWidgetOpacity;
-    }, [snapWidgetOpacity]);
-    const onWidgetIconChange = React.useCallback(async () => {
-        UiFramework.setShowWidgetIcon(!showWidgetIcon);
-    }, [showWidgetIcon]);
-    const onAutoCollapseUnpinnedPanelsChange = React.useCallback(async () => {
-        UiFramework.setAutoCollapseUnpinnedPanels(!autoCollapseUnpinnedPanels);
-    }, [autoCollapseUnpinnedPanels]);
-    const onWidgetOpacityChange = React.useCallback(async (values) => {
-        // istanbul ignore else
-        if (values.length > 0) {
-            UiFramework.setWidgetOpacity(values[0]);
-        }
-    }, []);
-    const onToggleDragInteraction = React.useCallback(async () => {
-        UiFramework.setUseDragInteraction(!useDragInteraction);
-    }, [useDragInteraction]);
-    const OnToggleAnimateToolSettings = React.useCallback(async () => {
-        UiFramework.setAnimateToolSettings(!animateToolSettings);
-    }, [animateToolSettings]);
-    const currentTheme = UiFramework.getColorTheme();
-    const OnToggleUseToolAsToolSettingsLabel = React.useCallback(async () => {
-        UiFramework.setUseToolAsToolSettingsLabel(!useToolAsToolSettingsLabel);
-    }, [useToolAsToolSettingsLabel]);
-    const onToolbarOpacityChange = React.useCallback(async (values) => {
-        // istanbul ignore else
-        if (values.length > 0) {
-            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(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(ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
-        React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
-        React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
-        React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
-        React.createElement(SettingsItem, { title: widgetIconTitle.current, description: widgetIconDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
-        React.createElement(SettingsItem, { title: autoCollapseUnpinnedPanelsTitle.current, description: autoCollapseUnpinnedPanelsDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
-        React.createElement(SettingsItem, { title: animateToolSettingsTitle.current, description: animateToolSettingsDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
-        React.createElement(SettingsItem, { title: useToolAsToolSettingsLabelTitle.current, description: useToolAsToolSettingsLabelDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
-        React.createElement(SettingsItem, { title: toolbarOpacityTitle.current, description: toolbarOpacityDescription.current, settingUi: React.createElement(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(Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })));
-}
-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
- */
-export function getUiSettingsManagerEntry(itemPriority) {
-    return {
-        itemPriority, tabId: "uifw:UiStateStorage",
-        label: UiFramework.translate("settings.uiSettingsPage.label"),
-        icon: IconSpecUtilities.createWebComponentIconSpec(widowSettingsIconSvg),
-        page: React.createElement(UiSettingsPage, null),
-        isDisabled: false,
-        tooltip: UiFramework.translate("settings.uiSettingsPage.tooltip"),
-    };
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+// cSpell:ignore configurableui checkmark
+import widowSettingsIconSvg from "@bentley/icons-generic/icons/window-settings.svg";
+import "./UiSettingsPage.scss";
+import * as React from "react";
+import { UiFramework } from "../../UiFramework";
+import { ColorTheme, SYSTEM_PREFERRED_COLOR_THEME } from "../../theme/ThemeManager";
+import { SyncUiEventDispatcher, SyncUiEventId } from "../../syncui/SyncUiEventDispatcher";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import { Select, Slider, ToggleSwitch } from "@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
+ */
+export function UiSettingsPage() {
+    const themeTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.themeTitle"));
+    const themeDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.themeDescription"));
+    const autoHideTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoHideTitle"));
+    const autoHideDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoHideDescription"));
+    const dragInteractionTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.dragInteractionTitle"));
+    const dragInteractionDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.dragInteractionDescription"));
+    const useProximityOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.useProximityOpacityTitle"));
+    const useProximityOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.useProximityOpacityDescription"));
+    const snapWidgetOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityTitle"));
+    const snapWidgetOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityDescription"));
+    const darkLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.dark"));
+    const lightLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.light"));
+    const systemPreferredLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.systemPreferred"));
+    const widgetOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetOpacityTitle"));
+    const widgetOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetOpacityDescription"));
+    const widgetIconTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetIconTitle"));
+    const widgetIconDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetIconDescription"));
+    const autoCollapseUnpinnedPanelsTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"));
+    const autoCollapseUnpinnedPanelsDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"));
+    const animateToolSettingsTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.animateToolSettingsTitle"));
+    const animateToolSettingsDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.animateToolSettingsDescription"));
+    const useToolAsToolSettingsLabelTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"));
+    const useToolAsToolSettingsLabelDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"));
+    const toolbarOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.toolbarOpacityTitle"));
+    const toolbarOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.toolbarOpacityDescription"));
+    const [theme, setTheme] = React.useState(() => UiFramework.getColorTheme());
+    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework.useDragInteraction);
+    const [showWidgetIcon, setShowWidgetIcon] = React.useState(() => UiFramework.showWidgetIcon);
+    const [autoCollapseUnpinnedPanels, setAutoCollapseUnpinnedPanels] = React.useState(() => UiFramework.autoCollapseUnpinnedPanels);
+    const [animateToolSettings, setAnimateToolSettings] = React.useState(() => UiFramework.animateToolSettings);
+    const [useToolAsToolSettingsLabel, setUseToolAsToolSettingsLabel] = React.useState(() => UiFramework.useToolAsToolSettingsLabel);
+    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework.getWidgetOpacity());
+    const [autoHideUi, setAutoHideUi] = React.useState(() => UiFramework.visibility.autoHideUi);
+    const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiFramework.visibility.useProximityOpacity);
+    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework.visibility.snapWidgetOpacity);
+    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => 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", SyncUiEventId.ShowHideManagerSettingChange];
+        const handleSyncUiEvent = (args) => {
+            // istanbul ignore else
+            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
+                if (UiFramework.getColorTheme() !== theme)
+                    setTheme(UiFramework.getColorTheme());
+                if (UiFramework.visibility.autoHideUi !== autoHideUi)
+                    setAutoHideUi(UiFramework.visibility.autoHideUi);
+                if (UiFramework.useDragInteraction !== useDragInteraction)
+                    setUseDragInteraction(UiFramework.useDragInteraction);
+                if (UiFramework.showWidgetIcon !== showWidgetIcon)
+                    setShowWidgetIcon(UiFramework.showWidgetIcon);
+                if (UiFramework.autoCollapseUnpinnedPanels !== autoCollapseUnpinnedPanels)
+                    setAutoCollapseUnpinnedPanels(UiFramework.autoCollapseUnpinnedPanels);
+                if (UiFramework.getWidgetOpacity() !== widgetOpacity)
+                    setWidgetOpacity(UiFramework.getWidgetOpacity());
+                if (UiFramework.visibility.autoHideUi !== autoHideUi)
+                    setAutoHideUi(UiFramework.visibility.autoHideUi);
+                if (UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
+                    setUseProximityOpacity(UiFramework.visibility.useProximityOpacity);
+                if (UiFramework.visibility.snapWidgetOpacity !== snapWidgetOpacity)
+                    setSnapWidgetOpacity(UiFramework.visibility.snapWidgetOpacity);
+                if (UiFramework.animateToolSettings !== animateToolSettings)
+                    setAnimateToolSettings(UiFramework.animateToolSettings);
+                if (UiFramework.useToolAsToolSettingsLabel !== useToolAsToolSettingsLabel)
+                    setUseToolAsToolSettingsLabel(UiFramework.useToolAsToolSettingsLabel);
+                if (UiFramework.getToolbarOpacity() !== toolbarOpacity)
+                    setToolbarOpacity(UiFramework.getToolbarOpacity());
+            }
+        };
+        return SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
+    }, [autoCollapseUnpinnedPanels, autoHideUi, showWidgetIcon, snapWidgetOpacity, theme,
+        useDragInteraction, useProximityOpacity, widgetOpacity, animateToolSettings, useToolAsToolSettingsLabel, toolbarOpacity]);
+    const defaultThemeOption = { label: systemPreferredLabel.current, value: SYSTEM_PREFERRED_COLOR_THEME };
+    const themeOptions = [
+        defaultThemeOption,
+        { label: lightLabel.current, value: ColorTheme.Light },
+        { label: darkLabel.current, value: ColorTheme.Dark },
+    ];
+    const onThemeChange = React.useCallback((newValue) => {
+        UiFramework.setColorTheme(newValue);
+    }, []);
+    const onAutoHideChange = React.useCallback(async () => {
+        UiFramework.visibility.autoHideUi = !autoHideUi;
+    }, [autoHideUi]);
+    const onUseProximityOpacityChange = React.useCallback(async () => {
+        UiFramework.visibility.useProximityOpacity = !useProximityOpacity;
+    }, [useProximityOpacity]);
+    const onSnapWidgetOpacityChange = React.useCallback(async () => {
+        UiFramework.visibility.snapWidgetOpacity = !snapWidgetOpacity;
+    }, [snapWidgetOpacity]);
+    const onWidgetIconChange = React.useCallback(async () => {
+        UiFramework.setShowWidgetIcon(!showWidgetIcon);
+    }, [showWidgetIcon]);
+    const onAutoCollapseUnpinnedPanelsChange = React.useCallback(async () => {
+        UiFramework.setAutoCollapseUnpinnedPanels(!autoCollapseUnpinnedPanels);
+    }, [autoCollapseUnpinnedPanels]);
+    const onWidgetOpacityChange = React.useCallback(async (values) => {
+        // istanbul ignore else
+        if (values.length > 0) {
+            UiFramework.setWidgetOpacity(values[0]);
+        }
+    }, []);
+    const onToggleDragInteraction = React.useCallback(async () => {
+        UiFramework.setUseDragInteraction(!useDragInteraction);
+    }, [useDragInteraction]);
+    const OnToggleAnimateToolSettings = React.useCallback(async () => {
+        UiFramework.setAnimateToolSettings(!animateToolSettings);
+    }, [animateToolSettings]);
+    const currentTheme = UiFramework.getColorTheme();
+    const OnToggleUseToolAsToolSettingsLabel = React.useCallback(async () => {
+        UiFramework.setUseToolAsToolSettingsLabel(!useToolAsToolSettingsLabel);
+    }, [useToolAsToolSettingsLabel]);
+    const onToolbarOpacityChange = React.useCallback(async (values) => {
+        // istanbul ignore else
+        if (values.length > 0) {
+            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(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(ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
+        React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
+        React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
+        React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
+        React.createElement(SettingsItem, { title: widgetIconTitle.current, description: widgetIconDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
+        React.createElement(SettingsItem, { title: autoCollapseUnpinnedPanelsTitle.current, description: autoCollapseUnpinnedPanelsDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
+        React.createElement(SettingsItem, { title: animateToolSettingsTitle.current, description: animateToolSettingsDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
+        React.createElement(SettingsItem, { title: useToolAsToolSettingsLabelTitle.current, description: useToolAsToolSettingsLabelDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
+        React.createElement(SettingsItem, { title: toolbarOpacityTitle.current, description: toolbarOpacityDescription.current, settingUi: React.createElement(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(Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })));
+}
+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
+ */
+export function getUiSettingsManagerEntry(itemPriority) {
+    return {
+        itemPriority, tabId: "uifw:UiStateStorage",
+        label: UiFramework.translate("settings.uiSettingsPage.label"),
+        icon: IconSpecUtilities.createWebComponentIconSpec(widowSettingsIconSvg),
+        page: React.createElement(UiSettingsPage, null),
+        isDisabled: false,
+        tooltip: UiFramework.translate("settings.uiSettingsPage.tooltip"),
+    };
+}
 //# sourceMappingURL=UiSettingsPage.js.map

package/lib/esm/appui-react/shared/ActionButtonItemDef.d.ts

@@ -1,29 +1,29 @@
-/** @packageDocumentation
- * @module Item
- */
-import { CommandHandler, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import { Orientation, SizeProps } from "@itwin/core-react";
-import { ItemDefBase } from "./ItemDefBase";
-import { ItemProps } from "./ItemProps";
-/** Abstract base class that is used by classes to execute an action when pressed.
- * @public
- */
-export declare abstract class ActionButtonItemDef extends ItemDefBase {
-    private _onItemExecuted?;
-    /** Command Handler for the action button */
-    protected _commandHandler?: CommandHandler;
-    /** Parameters passed to the Command Handler */
-    parameters?: any;
-    /** Size of the action button, as set by handleSizeKnown */
-    size?: SizeProps;
-    /** The default button size for all action buttons */
-    static defaultButtonSize: number;
-    constructor(itemProps: ItemProps, onItemExecuted?: OnItemExecutedFunc);
-    /** Called when the action button is invoked by a click or touch */
-    execute(): void;
-    /** Called when the size of the action button is initialized and the size is known */
-    handleSizeKnown: (size: SizeProps) => void;
-    /** Determines the dimension in a given orientation */
-    getDimension(orientation: Orientation): number;
-}
+/** @packageDocumentation
+ * @module Item
+ */
+import { CommandHandler, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import { Orientation, SizeProps } from "@itwin/core-react";
+import { ItemDefBase } from "./ItemDefBase";
+import { ItemProps } from "./ItemProps";
+/** Abstract base class that is used by classes to execute an action when pressed.
+ * @public
+ */
+export declare abstract class ActionButtonItemDef extends ItemDefBase {
+    private _onItemExecuted?;
+    /** Command Handler for the action button */
+    protected _commandHandler?: CommandHandler;
+    /** Parameters passed to the Command Handler */
+    parameters?: any;
+    /** Size of the action button, as set by handleSizeKnown */
+    size?: SizeProps;
+    /** The default button size for all action buttons */
+    static defaultButtonSize: number;
+    constructor(itemProps: ItemProps, onItemExecuted?: OnItemExecutedFunc);
+    /** Called when the action button is invoked by a click or touch */
+    execute(): void;
+    /** Called when the size of the action button is initialized and the size is known */
+    handleSizeKnown: (size: SizeProps) => void;
+    /** Determines the dimension in a given orientation */
+    getDimension(orientation: Orientation): number;
+}
 //# sourceMappingURL=ActionButtonItemDef.d.ts.map