@itwin/core-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/cjs/core-react/select/themed-select.scss

@@ -0,0 +1,159 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "../inputs/variables";
+@import "../scrollbar";
+@import "../z-index";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/itwinui-css/scss/style/variables";
+
+//HACK
+// there is an issue in react-select where generated styles have higher
+// priority than the class prefix style solution, which we use. I thought
+// this was the best solution after testing several, the better of which
+// caused an obscure node-sass error
+.uicore-reactSelectTop {
+  $uicore-select-padding-bordered:  $uicore-inputs-padding-bordered;
+
+  font-size:          $iui-font-size;
+  font-weight:        normal;
+  color:              $buic-text-color;
+  background-image:   none;
+  border-radius:      $iui-border-radius;
+  box-sizing:         border-box;
+  box-shadow:         $buic-inputs-boxshadow 0px 1px 1px inset;
+  transition:         border-color $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
+
+  @include firefox-only {
+    padding-top:      $uicore-select-padding-bordered - 1px;
+    padding-bottom:   $uicore-select-padding-bordered - 1px;
+  }
+
+  .react-select {
+    &__control {
+      background-color: $buic-background-control;
+      color: $buic-foreground-body;
+      border: 1px solid $buic-inputs-border;
+      cursor: pointer;
+
+      svg {
+        width: unset;
+        height: unset;
+      }
+
+      &--is-focused {
+        outline: 0px;
+        border-color: $buic-foreground-focus-border;
+        box-shadow: $uicore-inputs-focus-boxshadow;
+
+        &:hover {
+          border-color: $buic-foreground-focus-border;
+        }
+      }
+
+      &--is-disabled {
+        background-color: $buic-background-control-disabled;
+        color: $buic-text-color-disabled;
+        opacity: $uicore-opacity-disabled;
+        cursor: not-allowed;
+      }
+
+      .react-select__placeholder {
+        color: $buic-foreground-disabled;
+      }
+
+      .react-select__value-container {
+        .react-select__multi-value {
+          background: $buic-background-control;
+          color: $buic-foreground-primary;
+
+          .react-select__multi-value__label {
+            color: $buic-foreground-body;
+
+            .react-select__multi-value__remove {
+              background: $buic-background-control;
+            }
+          }
+        }
+
+        .react-select__multi-value__remove {
+          cursor: pointer;
+        }
+      }
+
+    }
+
+    &__single-value {
+      color: $buic-foreground-body;
+    }
+
+    &__indicator {
+      color: $buic-foreground-body;
+
+      &:hover {
+        color: $buic-foreground-activehover;
+        cursor: pointer;
+      }
+
+      &-separator {
+        visibility: hidden;
+      }
+    }
+
+    &__input {
+      input {
+        width: 100% !important;
+        color: $buic-foreground-body !important;
+      }
+    }
+
+    &__option {
+      &:active {
+        background-color: $buic-background-active-overlay;
+      }
+
+      &:hover:not(.react-select__option--is-selected) {
+        background-color: $buic-background-hover-overlay;
+      }
+
+      &--is-focused:not(.react-select__option--is-selected) {
+        background-color: $buic-background-hover-overlay;
+      }
+
+      &--is-selected {
+        color: $buic-foreground-body;
+        background-color: $buic-background-pressed-overlay;
+
+        &:active {
+          background-color: $buic-background-active-overlay;
+        }
+      }
+    }
+
+    &__menu {
+      //HACK: double selector for specificity
+      &#{&} {
+        margin-top: 0;
+        color: $buic-foreground-body;
+        background-color: $buic-background-control;
+        @include uicore-z-index(dialog-popup);
+      }
+
+      .react-select__menu-list {
+        @include uicore-scrollbar();
+      }
+    }
+  }
+
+  // Double .react-select__menu intended to be more specific than the inline style.
+  .react-select__menu.react-select__menu {
+    @include uicore-scrollbar($buic-background-scrollbar, $buic-foreground-body);
+    margin-top: 0;
+    color: $buic-foreground-body;
+    background-color: $buic-background-control;
+    @include uicore-z-index(dialog-popup);
+  }
+}

package/lib/cjs/core-react/settings/SettingsContainer.d.ts

@@ -1,31 +1,31 @@
-/** @packageDocumentation
- * @module Settings
- */
-/// <reference types="react" />
-import "./SettingsContainer.scss";
-import { SettingsManager, SettingsTabEntry } from "./SettingsManager";
-/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
- * @public
- */
-export declare function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void): void;
-/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
- * @public
- */
-export declare function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void): void;
-/**
- * @public
- */
-export interface SettingsContainerProps {
-    tabs: SettingsTabEntry[];
-    currentSettingsTab?: SettingsTabEntry;
-    onSettingsTabSelected?: (tab: SettingsTabEntry) => void;
-    settingsManager: SettingsManager;
-    showHeader?: boolean;
-}
-/**
- * SettingsContainer component that displays Setting Tabs on Left and the P
- * Note: that SettingsContainer is not rendered if tabs array is empty
- * @public
- */
-export declare const SettingsContainer: ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }: SettingsContainerProps) => JSX.Element;
+/** @packageDocumentation
+ * @module Settings
+ */
+/// <reference types="react" />
+import "./SettingsContainer.scss";
+import { SettingsManager, SettingsTabEntry } from "./SettingsManager";
+/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
+ * @public
+ */
+export declare function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void): void;
+/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
+ * @public
+ */
+export declare function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void): void;
+/**
+ * @public
+ */
+export interface SettingsContainerProps {
+    tabs: SettingsTabEntry[];
+    currentSettingsTab?: SettingsTabEntry;
+    onSettingsTabSelected?: (tab: SettingsTabEntry) => void;
+    settingsManager: SettingsManager;
+    showHeader?: boolean;
+}
+/**
+ * SettingsContainer component that displays Setting Tabs on Left and the P
+ * Note: that SettingsContainer is not rendered if tabs array is empty
+ * @public
+ */
+export declare const SettingsContainer: ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }: SettingsContainerProps) => JSX.Element;
 //# sourceMappingURL=SettingsContainer.d.ts.map

package/lib/cjs/core-react/settings/SettingsContainer.js

@@ -1,122 +1,122 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Settings
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SettingsContainer = exports.useSaveBeforeActivatingNewSettingsTab = exports.useSaveBeforeClosingSettingsContainer = void 0;
-require("./SettingsContainer.scss");
-const React = require("react");
-const VerticalTabs_1 = require("../tabs/VerticalTabs");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-/*  ---------------------------------------------------------------------------------------------------
-// A typical implementation of a saveFunction callback
-const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {
-  if (dataIsDirty) {
-    // prompt user to save changes passing in function and arguments to call after saving changes.
-    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}
-      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);
-    return;
-  }
-  afterSaveFunction(args);
-}, []);
----------------------------------------------------------------------------------------------------------- */
-/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
- * @public
- */
-function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        const handleProcessSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
-            saveFunction(closeFunc, closeFuncArgs);
-        };
-        return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);
-    }, [saveFunction, settingsManager]);
-}
-exports.useSaveBeforeClosingSettingsContainer = useSaveBeforeClosingSettingsContainer;
-/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
- * @public
- */
-function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        const handleProcessSettingsTabActivation = ({ tabSelectionFunc, requestedSettingsTabId }) => {
-            saveFunction(tabSelectionFunc, requestedSettingsTabId);
-        };
-        return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);
-    }, [saveFunction, settingsManager]);
-}
-exports.useSaveBeforeActivatingNewSettingsTab = useSaveBeforeActivatingNewSettingsTab;
-/**
- * SettingsContainer component that displays Setting Tabs on Left and the P
- * Note: that SettingsContainer is not rendered if tabs array is empty
- * @public
- */
-const SettingsContainer = ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }) => {
-    // sort the tabs based on itemPriority
-    tabs = tabs.sort((a, b) => a.itemPriority - b.itemPriority);
-    const [openTab, setOpenTab] = React.useState(() => {
-        if (currentSettingsTab && !appui_abstract_1.ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
-            return currentSettingsTab;
-        else
-            return tabs[0];
-    });
-    const processTabSelection = React.useCallback((tab) => {
-        if (appui_abstract_1.ConditionalBooleanValue.getValue(tab.isDisabled))
-            return;
-        onSettingsTabSelected && onSettingsTabSelected(tab);
-        setOpenTab(tab);
-    }, [onSettingsTabSelected]);
-    const processTabSelectionById = React.useCallback((tabId) => {
-        const tabToActivate = tabs.find((tab) => tab.tabId === tabId);
-        tabToActivate && processTabSelection(tabToActivate);
-    }, [processTabSelection, tabs]);
-    const onActivateTab = React.useCallback((tabIndex) => {
-        const selectedTab = tabs[tabIndex];
-        if (openTab && openTab.pageWillHandleCloseRequest)
-            settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: selectedTab.tabId, tabSelectionFunc: processTabSelectionById });
-        else
-            processTabSelection(selectedTab);
-    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);
-    React.useEffect(() => {
-        const handleActivateSettingsTab = ({ settingsTabId }) => {
-            const idToFind = settingsTabId.toLowerCase();
-            let tabToActivate = tabs.find((tab) => tab.tabId.toLowerCase() === idToFind);
-            if (!tabToActivate)
-                tabToActivate = tabs.find((tab) => tab.label.toLowerCase() === idToFind);
-            // istanbul ignore else
-            if (tabToActivate) {
-                if (openTab && openTab.pageWillHandleCloseRequest)
-                    settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: tabToActivate.tabId, tabSelectionFunc: processTabSelectionById });
-                else
-                    processTabSelection(tabToActivate);
-            }
-        };
-        return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);
-    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
-    React.useEffect(() => {
-        const handleSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
-            if (openTab && openTab.pageWillHandleCloseRequest)
-                settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });
-            else
-                closeFunc(closeFuncArgs);
-        };
-        return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);
-    }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
-    const labels = tabs.map((tab) => {
-        return { label: tab.label, subLabel: tab.subLabel, icon: tab.icon,
-            tooltip: tab.tooltip, tabId: tab.tabId, disabled: appui_abstract_1.ConditionalBooleanValue.getValue(tab.isDisabled) };
-    });
-    const activeIndex = tabs.findIndex((tab) => tab.tabId === openTab.tabId);
-    return (React.createElement("div", { className: "core-settings-container" },
-        React.createElement("div", { className: "core-settings-container-left" },
-            React.createElement(VerticalTabs_1.VerticalTabs, { labels: labels, activeIndex: activeIndex, onActivateTab: onActivateTab })),
-        React.createElement("div", { className: "core-settings-container-right" },
-            showHeader && React.createElement("div", { className: "core-settings-container-right-header" },
-                React.createElement("span", { className: "core-settings-container-main-header" }, openTab.label),
-                openTab.subLabel && React.createElement("span", { className: "core-settings-container-main-sub-header" }, openTab.subLabel)),
-            React.createElement("div", { className: "core-settings-container-right-contents" }, openTab.page))));
-};
-exports.SettingsContainer = SettingsContainer;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Settings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsContainer = exports.useSaveBeforeActivatingNewSettingsTab = exports.useSaveBeforeClosingSettingsContainer = void 0;
+require("./SettingsContainer.scss");
+const React = require("react");
+const VerticalTabs_1 = require("../tabs/VerticalTabs");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/*  ---------------------------------------------------------------------------------------------------
+// A typical implementation of a saveFunction callback
+const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {
+  if (dataIsDirty) {
+    // prompt user to save changes passing in function and arguments to call after saving changes.
+    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}
+      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);
+    return;
+  }
+  afterSaveFunction(args);
+}, []);
+---------------------------------------------------------------------------------------------------------- */
+/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
+ * @public
+ */
+function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
+    React.useEffect(() => {
+        const handleProcessSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
+            saveFunction(closeFunc, closeFuncArgs);
+        };
+        return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);
+    }, [saveFunction, settingsManager]);
+}
+exports.useSaveBeforeClosingSettingsContainer = useSaveBeforeClosingSettingsContainer;
+/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
+ * @public
+ */
+function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
+    React.useEffect(() => {
+        const handleProcessSettingsTabActivation = ({ tabSelectionFunc, requestedSettingsTabId }) => {
+            saveFunction(tabSelectionFunc, requestedSettingsTabId);
+        };
+        return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);
+    }, [saveFunction, settingsManager]);
+}
+exports.useSaveBeforeActivatingNewSettingsTab = useSaveBeforeActivatingNewSettingsTab;
+/**
+ * SettingsContainer component that displays Setting Tabs on Left and the P
+ * Note: that SettingsContainer is not rendered if tabs array is empty
+ * @public
+ */
+const SettingsContainer = ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }) => {
+    // sort the tabs based on itemPriority
+    tabs = tabs.sort((a, b) => a.itemPriority - b.itemPriority);
+    const [openTab, setOpenTab] = React.useState(() => {
+        if (currentSettingsTab && !appui_abstract_1.ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
+            return currentSettingsTab;
+        else
+            return tabs[0];
+    });
+    const processTabSelection = React.useCallback((tab) => {
+        if (appui_abstract_1.ConditionalBooleanValue.getValue(tab.isDisabled))
+            return;
+        onSettingsTabSelected && onSettingsTabSelected(tab);
+        setOpenTab(tab);
+    }, [onSettingsTabSelected]);
+    const processTabSelectionById = React.useCallback((tabId) => {
+        const tabToActivate = tabs.find((tab) => tab.tabId === tabId);
+        tabToActivate && processTabSelection(tabToActivate);
+    }, [processTabSelection, tabs]);
+    const onActivateTab = React.useCallback((tabIndex) => {
+        const selectedTab = tabs[tabIndex];
+        if (openTab && openTab.pageWillHandleCloseRequest)
+            settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: selectedTab.tabId, tabSelectionFunc: processTabSelectionById });
+        else
+            processTabSelection(selectedTab);
+    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);
+    React.useEffect(() => {
+        const handleActivateSettingsTab = ({ settingsTabId }) => {
+            const idToFind = settingsTabId.toLowerCase();
+            let tabToActivate = tabs.find((tab) => tab.tabId.toLowerCase() === idToFind);
+            if (!tabToActivate)
+                tabToActivate = tabs.find((tab) => tab.label.toLowerCase() === idToFind);
+            // istanbul ignore else
+            if (tabToActivate) {
+                if (openTab && openTab.pageWillHandleCloseRequest)
+                    settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: tabToActivate.tabId, tabSelectionFunc: processTabSelectionById });
+                else
+                    processTabSelection(tabToActivate);
+            }
+        };
+        return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);
+    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
+    React.useEffect(() => {
+        const handleSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
+            if (openTab && openTab.pageWillHandleCloseRequest)
+                settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });
+            else
+                closeFunc(closeFuncArgs);
+        };
+        return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);
+    }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
+    const labels = tabs.map((tab) => {
+        return { label: tab.label, subLabel: tab.subLabel, icon: tab.icon,
+            tooltip: tab.tooltip, tabId: tab.tabId, disabled: appui_abstract_1.ConditionalBooleanValue.getValue(tab.isDisabled) };
+    });
+    const activeIndex = tabs.findIndex((tab) => tab.tabId === openTab.tabId);
+    return (React.createElement("div", { className: "core-settings-container" },
+        React.createElement("div", { className: "core-settings-container-left" },
+            React.createElement(VerticalTabs_1.VerticalTabs, { labels: labels, activeIndex: activeIndex, onActivateTab: onActivateTab })),
+        React.createElement("div", { className: "core-settings-container-right" },
+            showHeader && React.createElement("div", { className: "core-settings-container-right-header" },
+                React.createElement("span", { className: "core-settings-container-main-header" }, openTab.label),
+                openTab.subLabel && React.createElement("span", { className: "core-settings-container-main-sub-header" }, openTab.subLabel)),
+            React.createElement("div", { className: "core-settings-container-right-contents" }, openTab.page))));
+};
+exports.SettingsContainer = SettingsContainer;
 //# sourceMappingURL=SettingsContainer.js.map

package/lib/cjs/core-react/settings/SettingsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Settings\n */\n\nimport \"./SettingsContainer.scss\";\nimport * as React from \"react\";\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\n\n/*  ---------------------------------------------------------------------------------------------------\n// A typical implementation of a saveFunction callback\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\n  if (dataIsDirty) {\n    // prompt user to save changes passing in function and arguments to call after saving changes.\n    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\n    return;\n  }\n  afterSaveFunction(args);\n}, []);\n---------------------------------------------------------------------------------------------------------- */\n\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\n * @public\n */\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\n  React.useEffect (()=>{\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\n      saveFunction (closeFunc, closeFuncArgs);\n    };\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\n  }, [saveFunction, settingsManager]);\n}\n\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\n * @public\n */\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\n  React.useEffect (()=>{\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\n    };\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\n  }, [saveFunction, settingsManager]);\n}\n\n/**\n * @public\n */\nexport interface SettingsContainerProps {\n  tabs: SettingsTabEntry[];\n  // sets tab to set as active tab\n  currentSettingsTab?: SettingsTabEntry;\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\n  settingsManager: SettingsManager;\n  // if true show tab label as header above page contents.\n  showHeader?: boolean;\n}\n\n/**\n * SettingsContainer component that displays Setting Tabs on Left and the P\n * Note: that SettingsContainer is not rendered if tabs array is empty\n * @public\n */\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\n  // sort the tabs based on itemPriority\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\n\n  const [openTab, setOpenTab] = React.useState(()=>{\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\n      return currentSettingsTab;\n    else\n      return tabs[0];\n  });\n\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\n      return;\n    onSettingsTabSelected && onSettingsTabSelected(tab);\n    setOpenTab(tab);\n  }, [onSettingsTabSelected]);\n\n  const processTabSelectionById = React.useCallback((tabId: string) => {\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\n    tabToActivate && processTabSelection (tabToActivate);\n  }, [processTabSelection, tabs]);\n\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\n    const selectedTab = tabs[tabIndex];\n    if (openTab && openTab.pageWillHandleCloseRequest)\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\n    else\n      processTabSelection(selectedTab);\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\n\n  React.useEffect (()=>{\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\n      const idToFind = settingsTabId.toLowerCase();\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\n      if (!tabToActivate)\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\n      // istanbul ignore else\n      if (tabToActivate) {\n        if (openTab && openTab.pageWillHandleCloseRequest)\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\n        else\n          processTabSelection(tabToActivate);\n      }\n    };\n\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\n\n  React.useEffect (()=>{\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\n      if (openTab && openTab.pageWillHandleCloseRequest)\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\n      else\n        closeFunc(closeFuncArgs);\n    };\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\n\n  const labels=tabs.map((tab)=> {\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\n  });\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\n  return (\n    <div className=\"core-settings-container\">\n      <div className=\"core-settings-container-left\">\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\n      </div>\n      <div className=\"core-settings-container-right\">\n        {showHeader && <div className=\"core-settings-container-right-header\">\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\n        </div>}\n        <div className=\"core-settings-container-right-contents\">\n          {openTab.page}\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.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\nimport \"./SettingsContainer.scss\";\r\nimport * as React from \"react\";\r\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\r\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\n\r\n/*  ---------------------------------------------------------------------------------------------------\r\n// A typical implementation of a saveFunction callback\r\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n  if (dataIsDirty) {\r\n    // prompt user to save changes passing in function and arguments to call after saving changes.\r\n    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}\r\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\r\n    return;\r\n  }\r\n  afterSaveFunction(args);\r\n}, []);\r\n---------------------------------------------------------------------------------------------------------- */\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\r\n * @public\r\n */\r\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      saveFunction (closeFunc, closeFuncArgs);\r\n    };\r\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\r\n * @public\r\n */\r\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\r\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\r\n    };\r\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface SettingsContainerProps {\r\n  tabs: SettingsTabEntry[];\r\n  // sets tab to set as active tab\r\n  currentSettingsTab?: SettingsTabEntry;\r\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\r\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\r\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\r\n  settingsManager: SettingsManager;\r\n  // if true show tab label as header above page contents.\r\n  showHeader?: boolean;\r\n}\r\n\r\n/**\r\n * SettingsContainer component that displays Setting Tabs on Left and the P\r\n * Note: that SettingsContainer is not rendered if tabs array is empty\r\n * @public\r\n */\r\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\r\n  // sort the tabs based on itemPriority\r\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\r\n\r\n  const [openTab, setOpenTab] = React.useState(()=>{\r\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\r\n      return currentSettingsTab;\r\n    else\r\n      return tabs[0];\r\n  });\r\n\r\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\r\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\r\n      return;\r\n    onSettingsTabSelected && onSettingsTabSelected(tab);\r\n    setOpenTab(tab);\r\n  }, [onSettingsTabSelected]);\r\n\r\n  const processTabSelectionById = React.useCallback((tabId: string) => {\r\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\r\n    tabToActivate && processTabSelection (tabToActivate);\r\n  }, [processTabSelection, tabs]);\r\n\r\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\r\n    const selectedTab = tabs[tabIndex];\r\n    if (openTab && openTab.pageWillHandleCloseRequest)\r\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\r\n    else\r\n      processTabSelection(selectedTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\r\n      const idToFind = settingsTabId.toLowerCase();\r\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\r\n      if (!tabToActivate)\r\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\r\n      // istanbul ignore else\r\n      if (tabToActivate) {\r\n        if (openTab && openTab.pageWillHandleCloseRequest)\r\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\r\n        else\r\n          processTabSelection(tabToActivate);\r\n      }\r\n    };\r\n\r\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      if (openTab && openTab.pageWillHandleCloseRequest)\r\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\r\n      else\r\n        closeFunc(closeFuncArgs);\r\n    };\r\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\r\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  const labels=tabs.map((tab)=> {\r\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\r\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\r\n  });\r\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\r\n  return (\r\n    <div className=\"core-settings-container\">\r\n      <div className=\"core-settings-container-left\">\r\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\r\n      </div>\r\n      <div className=\"core-settings-container-right\">\r\n        {showHeader && <div className=\"core-settings-container-right-header\">\r\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\r\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\r\n        </div>}\r\n        <div className=\"core-settings-container-right-contents\">\r\n          {openTab.page}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}