@itwin/appui-react 3.0.0-dev.100

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

@@ -0,0 +1,148 @@
+/*---------------------------------------------------------------------------------------------
+* 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?sprite";
+import "./UiSettingsPage.scss";
+import * as React from "react";
+import { UiFramework } from "../../UiFramework";
+import { ColorTheme, SYSTEM_PREFERRED_COLOR_THEME } from "../../theme/ThemeManager";
+import { UiShowHideManager } from "../../utils/UiShowHideManager";
+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({ allowSettingUiFrameworkVersion }) {
+    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 useNewUiTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.newUiTitle"));
+    const useNewUiDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.newUiDescription"));
+    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 [theme, setTheme] = React.useState(() => UiFramework.getColorTheme());
+    const [uiVersion, setUiVersion] = React.useState(() => UiFramework.uiVersion);
+    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework.useDragInteraction);
+    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework.getWidgetOpacity());
+    const [autoHideUi, setAutoHideUi] = React.useState(() => UiShowHideManager.autoHideUi);
+    const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiShowHideManager.useProximityOpacity);
+    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiShowHideManager.snapWidgetOpacity);
+    React.useEffect(() => {
+        const syncIdsOfInterest = ["configurableui:set_theme", "configurableui:set_widget_opacity",
+            "configurableui:set-drag-interaction", "configurableui:set-framework-version", SyncUiEventId.ShowHideManagerSettingChange];
+        const handleSyncUiEvent = (args) => {
+            // istanbul ignore else
+            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
+                if (UiFramework.getColorTheme() !== theme)
+                    setTheme(UiFramework.getColorTheme());
+                if (UiShowHideManager.autoHideUi !== autoHideUi)
+                    setAutoHideUi(UiShowHideManager.autoHideUi);
+                if (UiFramework.uiVersion !== uiVersion)
+                    setUiVersion(UiFramework.uiVersion);
+                if (UiFramework.useDragInteraction !== useDragInteraction)
+                    setUseDragInteraction(UiFramework.useDragInteraction);
+                if (UiFramework.getWidgetOpacity() !== widgetOpacity)
+                    setWidgetOpacity(UiFramework.getWidgetOpacity());
+                if (UiShowHideManager.autoHideUi !== autoHideUi)
+                    setAutoHideUi(UiShowHideManager.autoHideUi);
+                if (UiShowHideManager.useProximityOpacity !== useProximityOpacity)
+                    setUseProximityOpacity(UiShowHideManager.useProximityOpacity);
+                if (UiShowHideManager.snapWidgetOpacity !== snapWidgetOpacity)
+                    setSnapWidgetOpacity(UiShowHideManager.snapWidgetOpacity);
+            }
+        };
+        return SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
+    }, [autoHideUi, snapWidgetOpacity, theme, uiVersion, useDragInteraction, useProximityOpacity, widgetOpacity]);
+    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 () => {
+        UiShowHideManager.autoHideUi = !UiShowHideManager.autoHideUi;
+    }, []);
+    const onUseProximityOpacityChange = React.useCallback(async () => {
+        UiShowHideManager.useProximityOpacity = !UiShowHideManager.useProximityOpacity;
+    }, []);
+    const onSnapWidgetOpacityChange = React.useCallback(async () => {
+        UiShowHideManager.snapWidgetOpacity = !UiShowHideManager.snapWidgetOpacity;
+    }, []);
+    const onWidgetOpacityChange = React.useCallback(async (values) => {
+        // istanbul ignore else
+        if (values.length > 0) {
+            UiFramework.setWidgetOpacity(values[0]);
+        }
+    }, []);
+    const onToggleFrameworkVersion = React.useCallback(async () => {
+        UiFramework.setUiVersion(UiFramework.uiVersion === "2" ? "1" : "2");
+    }, []);
+    const onToggleDragInteraction = React.useCallback(async () => {
+        UiFramework.setUseDragInteraction(!UiFramework.useDragInteraction);
+    }, []);
+    const currentTheme = UiFramework.getColorTheme();
+    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" })) }),
+        React.createElement(SettingsItem, { title: autoHideTitle.current, description: autoHideDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: UiShowHideManager.autoHideUi, onChange: onAutoHideChange }) }),
+        allowSettingUiFrameworkVersion && React.createElement(SettingsItem, { title: useNewUiTitle.current, description: useNewUiDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: UiFramework.uiVersion === "2", onChange: onToggleFrameworkVersion }) }),
+        UiFramework.uiVersion === "2" && React.createElement(React.Fragment, null,
+            React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: UiFramework.useDragInteraction, onChange: onToggleDragInteraction }) }),
+            React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: UiShowHideManager.useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
+            React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: UiShowHideManager.snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) })),
+        React.createElement(SettingsItem, { title: widgetOpacityTitle.current, description: widgetOpacityDescription.current, settingUi: React.createElement(Slider, { style: { flex: "1" }, values: [UiFramework.getWidgetOpacity()], 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, allowSettingUiFrameworkVersion) {
+    return {
+        itemPriority, tabId: "uifw:UiSettings",
+        label: UiFramework.translate("settings.uiSettingsPage.label"),
+        icon: IconSpecUtilities.createSvgIconSpec(widowSettingsIconSvg),
+        page: React.createElement(UiSettingsPage, { allowSettingUiFrameworkVersion: !!allowSettingUiFrameworkVersion }),
+        isDisabled: false,
+        tooltip: UiFramework.translate("settings.uiSettingsPage.tooltip"),
+    };
+}
+//# sourceMappingURL=UiSettingsPage.js.map

package/lib/esm/appui-react/settings/ui/UiSettingsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiSettingsPage.js","sourceRoot":"","sources":["../../../../../src/appui-react/settings/ui/UiSettingsPage.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 Settings\r\n */\r\n\r\n// cSpell:ignore configurableui checkmark\r\n\r\nimport widowSettingsIconSvg from \"@bentley/icons-generic/icons/window-settings.svg?sprite\";\r\nimport \"./UiSettingsPage.scss\";\r\nimport * as React from \"react\";\r\nimport { SettingsTabEntry } from \"@itwin/core-react\";\r\nimport { UiFramework } from \"../../UiFramework\";\r\nimport { ColorTheme, SYSTEM_PREFERRED_COLOR_THEME } from \"../../theme/ThemeManager\";\r\nimport { UiShowHideManager } from \"../../utils/UiShowHideManager\";\r\nimport { SyncUiEventArgs, SyncUiEventDispatcher, SyncUiEventId } from \"../../syncui/SyncUiEventDispatcher\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { Select, SelectOption, Slider, ToggleSwitch } from \"@itwin/itwinui-react\";\r\n\r\n/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.\r\n *\r\n * - theme - Dark, Light, or based on OS preference.\r\n * - auto hide - Starts a timer and blanks out ui components that overlay content if there is no mouse movement for a period of time.\r\n * - drag interaction - If set, toolbar group buttons require a press and drag or a long press to open. In this mode a child action\r\n * item is shown as the group button and is activated when button is clicked. If a different child item is selected, it becomes the\r\n * active group button item.\r\n * - use proximity - Changes the opacity of toolbar from transparent to opaque as the mouse moves closer.\r\n * - 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.\r\n * - widget opacity - determines how transparent floating widgets in V2 and all widgets in V1 become when the mouse in not in them.\r\n * - UI version - if allowed by props, the UI version can be toggled between V1 and V2.\r\n *\r\n * @beta\r\n */\r\nexport function UiSettingsPage({ allowSettingUiFrameworkVersion }: { allowSettingUiFrameworkVersion: boolean }) {\r\n  const themeTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.themeTitle\"));\r\n  const themeDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.themeDescription\"));\r\n  const autoHideTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.autoHideTitle\"));\r\n  const autoHideDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.autoHideDescription\"));\r\n  const dragInteractionTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.dragInteractionTitle\"));\r\n  const dragInteractionDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.dragInteractionDescription\"));\r\n  const useNewUiTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.newUiTitle\"));\r\n  const useNewUiDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.newUiDescription\"));\r\n  const useProximityOpacityTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.useProximityOpacityTitle\"));\r\n  const useProximityOpacityDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.useProximityOpacityDescription\"));\r\n  const snapWidgetOpacityTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.snapWidgetOpacityTitle\"));\r\n  const snapWidgetOpacityDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.snapWidgetOpacityDescription\"));\r\n  const darkLabel = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.dark\"));\r\n  const lightLabel = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.light\"));\r\n  const systemPreferredLabel = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.systemPreferred\"));\r\n  const widgetOpacityTitle = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.widgetOpacityTitle\"));\r\n  const widgetOpacityDescription = React.useRef(UiFramework.translate(\"settings.uiSettingsPage.widgetOpacityDescription\"));\r\n\r\n  const [theme, setTheme] = React.useState(() => UiFramework.getColorTheme());\r\n  const [uiVersion, setUiVersion] = React.useState(() => UiFramework.uiVersion);\r\n  const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework.useDragInteraction);\r\n  const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework.getWidgetOpacity());\r\n  const [autoHideUi, setAutoHideUi] = React.useState(() => UiShowHideManager.autoHideUi);\r\n  const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiShowHideManager.useProximityOpacity);\r\n  const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiShowHideManager.snapWidgetOpacity);\r\n\r\n  React.useEffect(() => {\r\n    const syncIdsOfInterest = [\"configurableui:set_theme\", \"configurableui:set_widget_opacity\",\r\n      \"configurableui:set-drag-interaction\", \"configurableui:set-framework-version\", SyncUiEventId.ShowHideManagerSettingChange];\r\n\r\n    const handleSyncUiEvent = (args: SyncUiEventArgs) => {\r\n      // istanbul ignore else\r\n      if (syncIdsOfInterest.some((value: string): boolean => args.eventIds.has(value))) {\r\n        if (UiFramework.getColorTheme() !== theme)\r\n          setTheme(UiFramework.getColorTheme());\r\n        if (UiShowHideManager.autoHideUi !== autoHideUi)\r\n          setAutoHideUi(UiShowHideManager.autoHideUi);\r\n        if (UiFramework.uiVersion !== uiVersion)\r\n          setUiVersion(UiFramework.uiVersion);\r\n        if (UiFramework.useDragInteraction !== useDragInteraction)\r\n          setUseDragInteraction(UiFramework.useDragInteraction);\r\n        if (UiFramework.getWidgetOpacity() !== widgetOpacity)\r\n          setWidgetOpacity(UiFramework.getWidgetOpacity());\r\n        if (UiShowHideManager.autoHideUi !== autoHideUi)\r\n          setAutoHideUi(UiShowHideManager.autoHideUi);\r\n        if (UiShowHideManager.useProximityOpacity !== useProximityOpacity)\r\n          setUseProximityOpacity(UiShowHideManager.useProximityOpacity);\r\n        if (UiShowHideManager.snapWidgetOpacity !== snapWidgetOpacity)\r\n          setSnapWidgetOpacity(UiShowHideManager.snapWidgetOpacity);\r\n      }\r\n    };\r\n    return SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);\r\n  }, [autoHideUi, snapWidgetOpacity, theme, uiVersion, useDragInteraction, useProximityOpacity, widgetOpacity]);\r\n\r\n  const defaultThemeOption = { label: systemPreferredLabel.current, value: SYSTEM_PREFERRED_COLOR_THEME };\r\n  const themeOptions: SelectOption<string>[] = [\r\n    defaultThemeOption,\r\n    { label: lightLabel.current, value: ColorTheme.Light },\r\n    { label: darkLabel.current, value: ColorTheme.Dark },\r\n  ];\r\n\r\n  const onThemeChange = React.useCallback((newValue: string) => {\r\n    UiFramework.setColorTheme(newValue);\r\n  }, []);\r\n\r\n  const onAutoHideChange = React.useCallback(async () => {\r\n    UiShowHideManager.autoHideUi = !UiShowHideManager.autoHideUi;\r\n  }, []);\r\n\r\n  const onUseProximityOpacityChange = React.useCallback(async () => {\r\n    UiShowHideManager.useProximityOpacity = !UiShowHideManager.useProximityOpacity;\r\n  }, []);\r\n\r\n  const onSnapWidgetOpacityChange = React.useCallback(async () => {\r\n    UiShowHideManager.snapWidgetOpacity = !UiShowHideManager.snapWidgetOpacity;\r\n  }, []);\r\n\r\n  const onWidgetOpacityChange = React.useCallback(async (values: readonly number[]) => {\r\n    // istanbul ignore else\r\n    if (values.length > 0) {\r\n      UiFramework.setWidgetOpacity(values[0]);\r\n    }\r\n  }, []);\r\n  const onToggleFrameworkVersion = React.useCallback(async () => {\r\n    UiFramework.setUiVersion(UiFramework.uiVersion === \"2\" ? \"1\" : \"2\");\r\n  }, []);\r\n\r\n  const onToggleDragInteraction = React.useCallback(async () => {\r\n    UiFramework.setUseDragInteraction(!UiFramework.useDragInteraction);\r\n  }, []);\r\n\r\n  const currentTheme = UiFramework.getColorTheme();\r\n\r\n  return (\r\n    <div className=\"uifw-settings\">\r\n      <SettingsItem title={themeTitle.current} description={themeDescription.current}\r\n        settingUi={\r\n          <div data-testid=\"select-theme-container\" className=\"select-theme-container\">\r\n            <Select\r\n              value={currentTheme}\r\n              onChange={onThemeChange}\r\n              options={themeOptions}\r\n              data-testid=\"select-theme\"\r\n            />\r\n          </div>\r\n        }\r\n      />\r\n      <SettingsItem title={autoHideTitle.current} description={autoHideDescription.current}\r\n        settingUi={<ToggleSwitch checked={UiShowHideManager.autoHideUi} onChange={onAutoHideChange} />}\r\n      />\r\n      {allowSettingUiFrameworkVersion && <SettingsItem title={useNewUiTitle.current} description={useNewUiDescription.current}\r\n        settingUi={<ToggleSwitch checked={UiFramework.uiVersion === \"2\"} onChange={onToggleFrameworkVersion} />}\r\n      />}\r\n      {UiFramework.uiVersion === \"2\" && <>\r\n        <SettingsItem title={dragInteractionTitle.current} description={dragInteractionDescription.current}\r\n          settingUi={<ToggleSwitch checked={UiFramework.useDragInteraction} onChange={onToggleDragInteraction} />}\r\n        />\r\n        <SettingsItem title={useProximityOpacityTitle.current} description={useProximityOpacityDescription.current}\r\n          settingUi={<ToggleSwitch checked={UiShowHideManager.useProximityOpacity} onChange={onUseProximityOpacityChange} />}\r\n        />\r\n        <SettingsItem title={snapWidgetOpacityTitle.current} description={snapWidgetOpacityDescription.current}\r\n          settingUi={<ToggleSwitch checked={UiShowHideManager.snapWidgetOpacity} onChange={onSnapWidgetOpacityChange} />}\r\n        />\r\n      </>\r\n      }\r\n      <SettingsItem title={widgetOpacityTitle.current} description={widgetOpacityDescription.current}\r\n        settingUi={\r\n          <Slider style={{ flex: \"1\" }} values={[UiFramework.getWidgetOpacity()]} step={0.05} onChange={onWidgetOpacityChange}\r\n            min={0.20} max={1.0} maxLabel=\"1.0\" tickLabels={[\"\", \"\", \"\", \"\", \"\"]} />\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface SettingsItemProps {\r\n  title: string;\r\n  description: string;\r\n  settingUi: React.ReactNode;\r\n}\r\n\r\nfunction SettingsItem(props: SettingsItemProps) {\r\n  const { title, description, settingUi } = props;\r\n\r\n  return (\r\n    <div className=\"uifw-settings-item\">\r\n      <div className=\"panel left-panel\">\r\n        <span className=\"title\">{title}</span>\r\n        <span className=\"description\">{description}</span>\r\n      </div>\r\n      <div className=\"panel right-panel\">\r\n        {settingUi}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n/**\r\n * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.\r\n * @param itemPriority - Used to define the order of the entry in the Settings Stage\r\n * @beta\r\n */\r\nexport function getUiSettingsManagerEntry(itemPriority: number, allowSettingUiFrameworkVersion?: boolean): SettingsTabEntry {\r\n  return {\r\n    itemPriority, tabId: \"uifw:UiSettings\",\r\n    label: UiFramework.translate(\"settings.uiSettingsPage.label\"),\r\n    icon: IconSpecUtilities.createSvgIconSpec(widowSettingsIconSvg),\r\n    page: <UiSettingsPage allowSettingUiFrameworkVersion={!!allowSettingUiFrameworkVersion} />,\r\n    isDisabled: false,\r\n    tooltip: UiFramework.translate(\"settings.uiSettingsPage.tooltip\"),\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/settings/ui/UiSettingsPage.scss

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+// cspell:ignore leftpanel rightpanel
+
+$settings-leftpanel-width: 225px;
+$settings-rightpanel-width: 220px;
+
+.components-settings-container {
+  height: calc(100% - 50px);
+  overflow: hidden;
+}
+
+.uifw-settings {
+  background: $buic-background-dialog;
+  color: $buic-text-color;
+  border-radius: 3px;
+  font-size: $iui-font-size;
+  display: flex;
+  flex-direction: column;
+}
+
+.uifw-settings-item {
+  display: flex;
+
+  >.panel {
+    flex: 1;
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  >.left-panel {
+    flex-direction: column;
+    min-width: $settings-leftpanel-width;
+    padding: 20px 15px 20px 15px;
+
+    >.title {
+      font-size: 18px;
+    }
+
+    >.description {
+      margin-top: 10px;
+      font-size: 12px;
+      color: $buic-text-color-muted;
+    }
+  }
+
+  >.right-panel {
+    display: flex;
+    align-items: center;
+    min-width: $settings-rightpanel-width;
+    padding: 30px 50px 30px 30px;
+
+    .toggle {
+      margin-right: 10px;
+    }
+
+    .select-theme-container {
+      flex: 1;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+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;
+    /** @internal */
+    static getRandomId(): string;
+    /** @internal */
+    getKey: (index?: number | undefined) => string;
+    /** @internal */
+    toolbarReactNode(index?: number): React.ReactNode;
+}
+//# sourceMappingURL=ActionButtonItemDef.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtonItemDef.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/shared/ActionButtonItemDef.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,8BAAsB,mBAAoB,SAAQ,WAAW;IAC3D,OAAO,CAAC,eAAe,CAAC,CAAqB;IAE7C,4CAA4C;IAC5C,SAAS,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC;IAC3C,+CAA+C;IACxC,UAAU,CAAC,EAAE,GAAG,CAAC;IACxB,2DAA2D;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACxB,qDAAqD;IACrD,OAAc,iBAAiB,SAAM;gBAEzB,SAAS,EAAE,SAAS,EAAE,cAAc,CAAC,EAAE,kBAAkB;IAOrE,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAatB,qFAAqF;IAC9E,eAAe,SAAU,SAAS,UAEvC;IAEF,sDAAsD;IAC/C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,MAAM;IAQrD,gBAAgB;WACF,WAAW,IAAI,MAAM;IAInC,gBAAgB;IACT,MAAM,kCAAqB,MAAM,CAGtC;IAEF,gBAAgB;IACT,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS;CAczD"}

package/lib/esm/appui-react/shared/ActionButtonItemDef.js

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { Orientation } from "@itwin/core-react";
+import { ActionItemButton } from "../toolbar/ActionItemButton";
+import { ItemDefBase } from "./ItemDefBase";
+/** Abstract base class that is used by classes to execute an action when pressed.
+ * @public
+ */
+export class ActionButtonItemDef extends ItemDefBase {
+    constructor(itemProps, onItemExecuted) {
+        super(itemProps);
+        /** Called when the size of the action button is initialized and the size is known */
+        this.handleSizeKnown = (size) => {
+            this.size = size;
+        };
+        /** @internal */
+        this.getKey = (index) => {
+            const key = (!!this.id) ? this.id : (index !== undefined) ? index.toString() : ActionButtonItemDef.getRandomId();
+            return key;
+        };
+        this.execute = this.execute.bind(this);
+        this._onItemExecuted = onItemExecuted;
+    }
+    /** Called when the action button is invoked by a click or touch */
+    execute() {
+        if (this._commandHandler && this._commandHandler.execute) {
+            if (this._commandHandler.getCommandArgs)
+                this._commandHandler.execute(this._commandHandler.getCommandArgs());
+            else
+                this._commandHandler.execute(this._commandHandler.parameters);
+        }
+        // istanbul ignore else
+        if (this._onItemExecuted)
+            this._onItemExecuted(this);
+    }
+    /** Determines the dimension in a given orientation */
+    getDimension(orientation) {
+        let dimension = ActionButtonItemDef.defaultButtonSize;
+        if (this.size)
+            dimension = (orientation === Orientation.Horizontal) ? this.size.width : this.size.height;
+        return dimension;
+    }
+    /** @internal */
+    static getRandomId() {
+        return (Math.floor(Math.random() * 100) + 1000).toString();
+    }
+    /** @internal */
+    toolbarReactNode(index) {
+        if (!this.isVisible) // eslint-disable-line deprecation/deprecation
+            return null;
+        const key = this.getKey(index);
+        return (React.createElement(ActionItemButton, { key: key, actionItem: this, onSizeKnown: this.handleSizeKnown }));
+    }
+}
+/** The default button size for all action buttons */
+ActionButtonItemDef.defaultButtonSize = 42;
+//# sourceMappingURL=ActionButtonItemDef.js.map

package/lib/esm/appui-react/shared/ActionButtonItemDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtonItemDef.js","sourceRoot":"","sources":["../../../../src/appui-react/shared/ActionButtonItemDef.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAa,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AACH,MAAM,OAAgB,mBAAoB,SAAQ,WAAW;IAY3D,YAAY,SAAoB,EAAE,cAAmC;QACnE,KAAK,CAAC,SAAS,CAAC,CAAC;QAoBnB,qFAAqF;QAC9E,oBAAe,GAAG,CAAC,IAAe,EAAE,EAAE;YAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;QAgBF,gBAAgB;QACT,WAAM,GAAG,CAAC,KAAc,EAAU,EAAE;YACzC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,EAAE,CAAC;YACjH,OAAO,GAAG,CAAC;QACb,CAAC,CAAC;QAzCA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC;IACxC,CAAC;IAED,mEAAmE;IAC5D,OAAO;QACZ,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YACxD,IAAI,IAAI,CAAC,eAAe,CAAC,cAAc;gBACrC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC,CAAC;;gBAEpE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACjE;QAED,uBAAuB;QACvB,IAAI,IAAI,CAAC,eAAe;YACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAOD,sDAAsD;IAC/C,YAAY,CAAC,WAAwB;QAC1C,IAAI,SAAS,GAAG,mBAAmB,CAAC,iBAAiB,CAAC;QACtD,IAAI,IAAI,CAAC,IAAI;YACX,SAAS,GAAG,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QAE5F,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,WAAW;QACvB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC7D,CAAC;IAQD,gBAAgB;IACT,gBAAgB,CAAC,KAAc;QACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,8CAA8C;YACjE,OAAO,IAAI,CAAC;QAEd,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,IAAI,CAAC,eAAe,GACjC,CACH,CAAC;IACJ,CAAC;;AA/DD,qDAAqD;AACvC,qCAAiB,GAAG,EAAE,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 Item\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommandHandler, OnItemExecutedFunc } from \"@itwin/appui-abstract\";\r\nimport { Orientation, SizeProps } from \"@itwin/core-react\";\r\nimport { ActionItemButton } from \"../toolbar/ActionItemButton\";\r\nimport { ItemDefBase } from \"./ItemDefBase\";\r\nimport { ItemProps } from \"./ItemProps\";\r\n\r\n/** Abstract base class that is used by classes to execute an action when pressed.\r\n * @public\r\n */\r\nexport abstract class ActionButtonItemDef extends ItemDefBase {\r\n  private _onItemExecuted?: OnItemExecutedFunc;\r\n\r\n  /** Command Handler for the action button */\r\n  protected _commandHandler?: CommandHandler;\r\n  /** Parameters passed to the Command Handler */\r\n  public parameters?: any;\r\n  /** Size of the action button, as set by handleSizeKnown */\r\n  public size?: SizeProps;\r\n  /** The default button size for all action buttons */\r\n  public static defaultButtonSize = 42;\r\n\r\n  constructor(itemProps: ItemProps, onItemExecuted?: OnItemExecutedFunc) {\r\n    super(itemProps);\r\n\r\n    this.execute = this.execute.bind(this);\r\n    this._onItemExecuted = onItemExecuted;\r\n  }\r\n\r\n  /** Called when the action button is invoked by a click or touch */\r\n  public execute(): void {\r\n    if (this._commandHandler && this._commandHandler.execute) {\r\n      if (this._commandHandler.getCommandArgs)\r\n        this._commandHandler.execute(this._commandHandler.getCommandArgs());\r\n      else\r\n        this._commandHandler.execute(this._commandHandler.parameters);\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (this._onItemExecuted)\r\n      this._onItemExecuted(this);\r\n  }\r\n\r\n  /** Called when the size of the action button is initialized and the size is known */\r\n  public handleSizeKnown = (size: SizeProps) => {\r\n    this.size = size;\r\n  };\r\n\r\n  /** Determines the dimension in a given orientation */\r\n  public getDimension(orientation: Orientation): number {\r\n    let dimension = ActionButtonItemDef.defaultButtonSize;\r\n    if (this.size)\r\n      dimension = (orientation === Orientation.Horizontal) ? this.size.width : this.size.height;\r\n\r\n    return dimension;\r\n  }\r\n\r\n  /** @internal */\r\n  public static getRandomId(): string {\r\n    return (Math.floor(Math.random() * 100) + 1000).toString();\r\n  }\r\n\r\n  /** @internal */\r\n  public getKey = (index?: number): string => {\r\n    const key = (!!this.id) ? this.id : (index !== undefined) ? index.toString() : ActionButtonItemDef.getRandomId();\r\n    return key;\r\n  };\r\n\r\n  /** @internal */\r\n  public toolbarReactNode(index?: number): React.ReactNode {\r\n    if (!this.isVisible) // eslint-disable-line deprecation/deprecation\r\n      return null;\r\n\r\n    const key = this.getKey(index);\r\n\r\n    return (\r\n      <ActionItemButton\r\n        key={key}\r\n        actionItem={this}\r\n        onSizeKnown={this.handleSizeKnown}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import { GroupItemDef } from "../toolbar/GroupItem";
+import { ActionButtonItemDef } from "./ActionButtonItemDef";
+import { CommandItemDef } from "./CommandItemDef";
+import { ToolItemDef } from "./ToolItemDef";
+/** Union of all Item definitions that can be specified in a GroupItem
+ * @public
+ */
+export declare type AnyItemDef = GroupItemDef | CommandItemDef | ToolItemDef | ActionButtonItemDef;
+//# sourceMappingURL=AnyItemDef.d.ts.map

package/lib/esm/appui-react/shared/AnyItemDef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnyItemDef.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/shared/AnyItemDef.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AACH,oBAAY,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,WAAW,GAAG,mBAAmB,CAAC"}

package/lib/esm/appui-react/shared/AnyItemDef.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+export {};
+//# sourceMappingURL=AnyItemDef.js.map

package/lib/esm/appui-react/shared/AnyItemDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnyItemDef.js","sourceRoot":"","sources":["../../../../src/appui-react/shared/AnyItemDef.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG","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 Item\r\n */\r\n\r\nimport { GroupItemDef } from \"../toolbar/GroupItem\";\r\nimport { ActionButtonItemDef } from \"./ActionButtonItemDef\";\r\nimport { CommandItemDef } from \"./CommandItemDef\";\r\nimport { ToolItemDef } from \"./ToolItemDef\";\r\n\r\n/** Union of all Item definitions that can be specified in a GroupItem\r\n * @public\r\n */\r\nexport type AnyItemDef = GroupItemDef | CommandItemDef | ToolItemDef | ActionButtonItemDef;\r\n"]}

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

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import { AnyItemDef } from "./AnyItemDef";
+import { CustomItemDef } from "./CustomItemDef";
+/** Union of all Item definitions that can be specified in a Toolbar
+ * @public
+ */
+export declare type AnyToolbarItemDef = AnyItemDef | CustomItemDef;
+//# sourceMappingURL=AnyToolbarItemDef.d.ts.map

package/lib/esm/appui-react/shared/AnyToolbarItemDef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnyToolbarItemDef.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/shared/AnyToolbarItemDef.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;GAEG;AACH,oBAAY,iBAAiB,GAAG,UAAU,GAAG,aAAa,CAAC"}

package/lib/esm/appui-react/shared/AnyToolbarItemDef.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+export {};
+//# sourceMappingURL=AnyToolbarItemDef.js.map

package/lib/esm/appui-react/shared/AnyToolbarItemDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnyToolbarItemDef.js","sourceRoot":"","sources":["../../../../src/appui-react/shared/AnyToolbarItemDef.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG","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 Item\r\n */\r\n\r\nimport { AnyItemDef } from \"./AnyItemDef\";\r\nimport { CustomItemDef } from \"./CustomItemDef\";\r\n\r\n/** Union of all Item definitions that can be specified in a Toolbar\r\n * @public\r\n */\r\nexport type AnyToolbarItemDef = AnyItemDef | CustomItemDef;\r\n"]}

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

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import { OnItemExecutedFunc } from "@itwin/appui-abstract";
+import { ActionButtonItemDef } from "./ActionButtonItemDef";
+import { CommandItemProps } from "./ItemProps";
+/** An Item that executes a Command.
+ * @public
+ */
+export declare class CommandItemDef extends ActionButtonItemDef {
+    private static _sId;
+    static commandIdPrefix: string;
+    commandId: string;
+    constructor(commandItemProps: CommandItemProps, onItemExecuted?: OnItemExecutedFunc);
+    get id(): string;
+}
+//# sourceMappingURL=CommandItemDef.d.ts.map

package/lib/esm/appui-react/shared/CommandItemDef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItemDef.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/shared/CommandItemDef.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,qBAAa,cAAe,SAAQ,mBAAmB;IACrD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAK;IACxB,OAAc,eAAe,SAAc;IACpC,SAAS,EAAE,MAAM,CAAM;gBAElB,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,CAAC,EAAE,kBAAkB;IAenF,IAAW,EAAE,IAAI,MAAM,CAEtB;CACF"}

package/lib/esm/appui-react/shared/CommandItemDef.js

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+import { ActionButtonItemDef } from "./ActionButtonItemDef";
+/** An Item that executes a Command.
+ * @public
+ */
+export class CommandItemDef extends ActionButtonItemDef {
+    constructor(commandItemProps, onItemExecuted) {
+        super(commandItemProps, onItemExecuted);
+        this.commandId = "";
+        if (commandItemProps.execute) {
+            this._commandHandler = { execute: commandItemProps.execute, parameters: commandItemProps.parameters, getCommandArgs: commandItemProps.getCommandArgs };
+        }
+        if (commandItemProps.commandId)
+            this.commandId = commandItemProps.commandId;
+        else {
+            CommandItemDef._sId++;
+            this.commandId = CommandItemDef.commandIdPrefix + CommandItemDef._sId;
+        }
+    }
+    get id() {
+        return this.commandId;
+    }
+}
+CommandItemDef._sId = 0;
+CommandItemDef.commandIdPrefix = "Command-";
+//# sourceMappingURL=CommandItemDef.js.map

package/lib/esm/appui-react/shared/CommandItemDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItemDef.js","sourceRoot":"","sources":["../../../../src/appui-react/shared/CommandItemDef.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAGH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,mBAAmB;IAKrD,YAAY,gBAAkC,EAAE,cAAmC;QACjF,KAAK,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;QAHnC,cAAS,GAAW,EAAE,CAAC;QAK5B,IAAI,gBAAgB,CAAC,OAAO,EAAE;YAC5B,IAAI,CAAC,eAAe,GAAG,EAAE,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,CAAC,UAAU,EAAE,cAAc,EAAE,gBAAgB,CAAC,cAAc,EAAE,CAAC;SACxJ;QAED,IAAI,gBAAgB,CAAC,SAAS;YAC5B,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,SAAS,CAAC;aACzC;YACH,cAAc,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC;SACvE;IACH,CAAC;IAED,IAAW,EAAE;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;;AArBc,mBAAI,GAAG,CAAC,CAAC;AACV,8BAAe,GAAG,UAAU,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 Item\r\n */\r\n\r\nimport { OnItemExecutedFunc } from \"@itwin/appui-abstract\";\r\nimport { ActionButtonItemDef } from \"./ActionButtonItemDef\";\r\nimport { CommandItemProps } from \"./ItemProps\";\r\n\r\n/** An Item that executes a Command.\r\n * @public\r\n */\r\nexport class CommandItemDef extends ActionButtonItemDef {\r\n  private static _sId = 0;\r\n  public static commandIdPrefix = \"Command-\";\r\n  public commandId: string = \"\";\r\n\r\n  constructor(commandItemProps: CommandItemProps, onItemExecuted?: OnItemExecutedFunc) {\r\n    super(commandItemProps, onItemExecuted);\r\n\r\n    if (commandItemProps.execute) {\r\n      this._commandHandler = { execute: commandItemProps.execute, parameters: commandItemProps.parameters, getCommandArgs: commandItemProps.getCommandArgs };\r\n    }\r\n\r\n    if (commandItemProps.commandId)\r\n      this.commandId = commandItemProps.commandId;\r\n    else {\r\n      CommandItemDef._sId++;\r\n      this.commandId = CommandItemDef.commandIdPrefix + CommandItemDef._sId;\r\n    }\r\n  }\r\n\r\n  public get id(): string {\r\n    return this.commandId;\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { ActionButtonItemDef } from "./ActionButtonItemDef";
+import { CustomItemProps } from "./CustomItemProps";
+/** An Item that renders a React component.
+ * @public
+ */
+export declare class CustomItemDef extends ActionButtonItemDef {
+    private static _sId;
+    static customIdPrefix: string;
+    customId: string;
+    reactElement?: React.ReactNode;
+    popupPanelNode?: React.ReactNode;
+    constructor(props: CustomItemProps);
+    get id(): string;
+    toolbarReactNode(index?: number): React.ReactNode;
+}
+//# sourceMappingURL=CustomItemDef.d.ts.map

package/lib/esm/appui-react/shared/CustomItemDef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomItemDef.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/shared/CustomItemDef.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD;;GAEG;AACH,qBAAa,aAAc,SAAQ,mBAAmB;IACpD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAK;IACxB,OAAc,cAAc,SAAa;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;gBAE5B,KAAK,EAAE,eAAe;IAclC,IAAW,EAAE,IAAI,MAAM,CAEtB;IAEe,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS;CAoBlE"}

package/lib/esm/appui-react/shared/CustomItemDef.js

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { ConditionalBooleanValue } from "@itwin/appui-abstract";
+import { ActionButtonItemDef } from "./ActionButtonItemDef";
+/** An Item that renders a React component.
+ * @public
+ */
+export class CustomItemDef extends ActionButtonItemDef {
+    constructor(props) {
+        super(props);
+        if (props.customId)
+            this.customId = props.customId;
+        else {
+            CustomItemDef._sId++;
+            this.customId = CustomItemDef.customIdPrefix + CustomItemDef._sId;
+        }
+        this.reactElement = props.reactElement;
+        this.popupPanelNode = props.popupPanelNode;
+    }
+    get id() {
+        return this.customId;
+    }
+    toolbarReactNode(index) {
+        if (!this.isVisible || ConditionalBooleanValue.getValue(this.isHidden)) // eslint-disable-line deprecation/deprecation
+            return null;
+        let clone;
+        // istanbul ignore else
+        if (this.reactElement && React.isValidElement(this.reactElement)) {
+            const key = this.getKey(index);
+            const cloneProps = {
+                key,
+                onSizeKnown: this.handleSizeKnown,
+            };
+            clone = React.cloneElement(this.reactElement, cloneProps);
+        }
+        return clone;
+    }
+}
+CustomItemDef._sId = 0;
+CustomItemDef.customIdPrefix = "Custom-";
+//# sourceMappingURL=CustomItemDef.js.map

package/lib/esm/appui-react/shared/CustomItemDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomItemDef.js","sourceRoot":"","sources":["../../../../src/appui-react/shared/CustomItemDef.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAS5D;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IAOpD,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,KAAK,CAAC,QAAQ;YAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;aAC5B;YACH,aAAa,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC;SACnE;QAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC;IAC7C,CAAC;IAED,IAAW,EAAE;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEe,gBAAgB,CAAC,KAAc;QAC7C,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,uBAAuB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,8CAA8C;YACpH,OAAO,IAAI,CAAC;QAEd,IAAI,KAAsB,CAAC;QAE3B,uBAAuB;QACvB,IAAI,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YAChE,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/B,MAAM,UAAU,GAAe;gBAC7B,GAAG;gBACH,WAAW,EAAE,IAAI,CAAC,eAAe;aAClC,CAAC;YAEF,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;SAC3D;QAED,OAAO,KAAK,CAAC;IACf,CAAC;;AA1Cc,kBAAI,GAAG,CAAC,CAAC;AACV,4BAAc,GAAG,SAAS,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 Item\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\nimport { SizeProps } from \"@itwin/core-react\";\r\nimport { ActionButtonItemDef } from \"./ActionButtonItemDef\";\r\nimport { CustomItemProps } from \"./CustomItemProps\";\r\n\r\n/** @internal */\r\ninterface CloneProps {\r\n  key: string;\r\n  onSizeKnown: (size: SizeProps) => void;\r\n}\r\n\r\n/** An Item that renders a React component.\r\n * @public\r\n */\r\nexport class CustomItemDef extends ActionButtonItemDef {\r\n  private static _sId = 0;\r\n  public static customIdPrefix = \"Custom-\";\r\n  public customId: string;\r\n  public reactElement?: React.ReactNode;  // prefer to use popupPanelNode\r\n  public popupPanelNode?: React.ReactNode;\r\n\r\n  constructor(props: CustomItemProps) {\r\n    super(props);\r\n\r\n    if (props.customId)\r\n      this.customId = props.customId;\r\n    else {\r\n      CustomItemDef._sId++;\r\n      this.customId = CustomItemDef.customIdPrefix + CustomItemDef._sId;\r\n    }\r\n\r\n    this.reactElement = props.reactElement;\r\n    this.popupPanelNode = props.popupPanelNode;\r\n  }\r\n\r\n  public get id(): string {\r\n    return this.customId;\r\n  }\r\n\r\n  public override toolbarReactNode(index?: number): React.ReactNode {\r\n    if (!this.isVisible || ConditionalBooleanValue.getValue(this.isHidden)) // eslint-disable-line deprecation/deprecation\r\n      return null;\r\n\r\n    let clone: React.ReactNode;\r\n\r\n    // istanbul ignore else\r\n    if (this.reactElement && React.isValidElement(this.reactElement)) {\r\n      const key = this.getKey(index);\r\n      const cloneProps: CloneProps = {\r\n        key,\r\n        onSizeKnown: this.handleSizeKnown,\r\n      };\r\n\r\n      clone = React.cloneElement(this.reactElement, cloneProps);\r\n    }\r\n\r\n    return clone;\r\n  }\r\n\r\n}\r\n"]}

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

@@ -0,0 +1,14 @@
+/** @packageDocumentation
+ * @module Item
+ */
+/// <reference types="react" />
+import { ItemProps } from "./ItemProps";
+/** Definition for a Custom item that renders a React component.
+ * @public
+ */
+export interface CustomItemProps extends ItemProps {
+    customId?: string;
+    reactElement?: React.ReactNode;
+    popupPanelNode?: React.ReactNode;
+}
+//# sourceMappingURL=CustomItemProps.d.ts.map

package/lib/esm/appui-react/shared/CustomItemProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomItemProps.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/shared/CustomItemProps.ts"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC"}

package/lib/esm/appui-react/shared/CustomItemProps.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+export {};
+//# sourceMappingURL=CustomItemProps.js.map