@itwin/core-react 3.4.0-dev.8 → 3.5.0-dev.4

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

@@ -1,159 +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);
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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