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

package/lib/esm/core-react/searchbox/SearchBox.js

@@ -1,108 +1,108 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module SearchBox
- */
-import "./SearchBox.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { UiCore } from "../UiCore";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { Input } from "@itwin/itwinui-react";
-import { Icon } from "../icons/IconComponent";
-import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
-/**
- * Input box for entering text to search for.
- * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
- * @public
- */
-export class SearchBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this._inputElement = null;
-        this._timeoutId = 0;
-        /** @internal */
-        this.state = { value: this.props.initialValue || "" };
-        /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
-        this._onValueChanged = (value, previousValue) => {
-            // istanbul ignore else
-            if (value === previousValue)
-                return;
-            this.setState((_prevState) => {
-                return {
-                    value,
-                };
-            }, () => { this.props.onValueChanged(this.state.value); });
-        };
-        this._trackChange = (_event) => {
-            let value = "";
-            const previousValue = this.state.value;
-            // istanbul ignore else
-            if (this._inputElement)
-                value = this._inputElement.value;
-            if (this.props.valueChangedDelay) {
-                this._unsetTimeout();
-                this._timeoutId = window.setTimeout(() => { this._onValueChanged(value, previousValue); }, this.props.valueChangedDelay);
-            }
-            else {
-                this._onValueChanged(value, previousValue);
-            }
-        };
-        this._handleKeyDown = (e) => {
-            switch (e.key) {
-                case SpecialKey.Escape:
-                    // istanbul ignore else
-                    if (this.props.onEscPressed)
-                        this.props.onEscPressed();
-                    break;
-                case SpecialKey.Enter:
-                    // istanbul ignore else
-                    if (this.props.onEnterPressed)
-                        this.props.onEnterPressed();
-                    break;
-            }
-        };
-        this._handleIconClick = (_event) => {
-            // istanbul ignore else
-            if (this._inputElement) {
-                const clear = this.state.value !== "";
-                this._inputElement.value = "";
-                // istanbul ignore else
-                if (clear && this.props.onClear)
-                    this.props.onClear();
-                this._inputElement.focus();
-            }
-            this._trackChange();
-        };
-        this._unsetTimeout = () => {
-            if (this._timeoutId) {
-                window.clearTimeout(this._timeoutId);
-                this._timeoutId = 0;
-            }
-        };
-    }
-    /** @internal */
-    render() {
-        const searchClassName = classnames("core-searchbox", this.props.className);
-        const emptyString = this.state.value === "";
-        const iconClassName = classnames("core-searchbox-icon", "icon");
-        const iconSpec = emptyString ? React.createElement(SvgSearch, null) : React.createElement(SvgClose, null);
-        const buttonTitle = UiCore.translate(emptyString ? "general.search" : "general.clear");
-        return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
-            React.createElement(Input, { defaultValue: this.props.initialValue, ref: (el) => { this._inputElement = el; }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder ? this.props.placeholder : UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
-            React.createElement("div", { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, title: buttonTitle },
-                React.createElement("span", { className: iconClassName },
-                    React.createElement(Icon, { iconSpec: iconSpec })))));
-    }
-    componentWillUnmount() {
-        this._unsetTimeout();
-    }
-    focus() {
-        // istanbul ignore else
-        if (this._inputElement)
-            this._inputElement.focus();
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SearchBox
+ */
+import "./SearchBox.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { UiCore } from "../UiCore";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+import { Icon } from "../icons/IconComponent";
+import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
+/**
+ * Input box for entering text to search for.
+ * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
+ * @public
+ */
+export class SearchBox extends React.Component {
+    constructor(props) {
+        super(props);
+        this._inputElement = null;
+        this._timeoutId = 0;
+        /** @internal */
+        this.state = { value: this.props.initialValue || "" };
+        /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
+        this._onValueChanged = (value, previousValue) => {
+            // istanbul ignore else
+            if (value === previousValue)
+                return;
+            this.setState((_prevState) => {
+                return {
+                    value,
+                };
+            }, () => { this.props.onValueChanged(this.state.value); });
+        };
+        this._trackChange = (_event) => {
+            let value = "";
+            const previousValue = this.state.value;
+            // istanbul ignore else
+            if (this._inputElement)
+                value = this._inputElement.value;
+            if (this.props.valueChangedDelay) {
+                this._unsetTimeout();
+                this._timeoutId = window.setTimeout(() => { this._onValueChanged(value, previousValue); }, this.props.valueChangedDelay);
+            }
+            else {
+                this._onValueChanged(value, previousValue);
+            }
+        };
+        this._handleKeyDown = (e) => {
+            switch (e.key) {
+                case SpecialKey.Escape:
+                    // istanbul ignore else
+                    if (this.props.onEscPressed)
+                        this.props.onEscPressed();
+                    break;
+                case SpecialKey.Enter:
+                    // istanbul ignore else
+                    if (this.props.onEnterPressed)
+                        this.props.onEnterPressed();
+                    break;
+            }
+        };
+        this._handleIconClick = (_event) => {
+            // istanbul ignore else
+            if (this._inputElement) {
+                const clear = this.state.value !== "";
+                this._inputElement.value = "";
+                // istanbul ignore else
+                if (clear && this.props.onClear)
+                    this.props.onClear();
+                this._inputElement.focus();
+            }
+            this._trackChange();
+        };
+        this._unsetTimeout = () => {
+            if (this._timeoutId) {
+                window.clearTimeout(this._timeoutId);
+                this._timeoutId = 0;
+            }
+        };
+    }
+    /** @internal */
+    render() {
+        const searchClassName = classnames("core-searchbox", this.props.className);
+        const emptyString = this.state.value === "";
+        const iconClassName = classnames("core-searchbox-icon", "icon");
+        const iconSpec = emptyString ? React.createElement(SvgSearch, null) : React.createElement(SvgClose, null);
+        const buttonTitle = UiCore.translate(emptyString ? "general.search" : "general.clear");
+        return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
+            React.createElement(Input, { defaultValue: this.props.initialValue, ref: (el) => { this._inputElement = el; }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder ? this.props.placeholder : UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
+            React.createElement("div", { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, title: buttonTitle },
+                React.createElement("span", { className: iconClassName },
+                    React.createElement(Icon, { iconSpec: iconSpec })))));
+    }
+    componentWillUnmount() {
+        this._unsetTimeout();
+    }
+    focus() {
+        // istanbul ignore else
+        if (this._inputElement)
+            this._inputElement.focus();
+    }
+}
 //# sourceMappingURL=SearchBox.js.map

package/lib/esm/core-react/searchbox/SearchBox.scss

@@ -3,7 +3,6 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "../style/themecolors";
-@import "../style/variables";
 
 .core-searchbox {
   font-family: var(--iui-font-sans);
@@ -11,13 +10,13 @@
   align-items: center;
   position: relative;
   //default values (height, width, font-size, color)
-  height: $uicore-component-height-normal;
+  height: 28px;
   width: 12em;
   font-size: var(--iui-font-size-1);
   color: var(--iui-color-text);
 
   input {
-    min-height: $uicore-component-height-normal;
+    min-height: 28px;
     padding: var(--iui-size-3xs) 2em var(--iui-size-3xs) 12px; //12px from design guide
     height: 100%;
     margin: 0;

package/lib/esm/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/esm/core-react/settings/SettingsContainer.js

@@ -1,116 +1,116 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Settings
- */
-import "./SettingsContainer.scss";
-import * as React from "react";
-import { VerticalTabs } from "../tabs/VerticalTabs";
-import { ConditionalBooleanValue } from "@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.
-    UiFramework.dialogs.modal.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
- */
-export function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        const handleProcessSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
-            saveFunction(closeFunc, closeFuncArgs);
-        };
-        return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);
-    }, [saveFunction, settingsManager]);
-}
-/** 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 function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        const handleProcessSettingsTabActivation = ({ tabSelectionFunc, requestedSettingsTabId }) => {
-            saveFunction(tabSelectionFunc, requestedSettingsTabId);
-        };
-        return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);
-    }, [saveFunction, settingsManager]);
-}
-/**
- * SettingsContainer component that displays Setting Tabs on Left and the P
- * Note: that SettingsContainer is not rendered if tabs array is empty
- * @public
- */
-export 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 && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
-            return currentSettingsTab;
-        else
-            return tabs[0];
-    });
-    const processTabSelection = React.useCallback((tab) => {
-        if (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: 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, { 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))));
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Settings
+ */
+import "./SettingsContainer.scss";
+import * as React from "react";
+import { VerticalTabs } from "../tabs/VerticalTabs";
+import { ConditionalBooleanValue } from "@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.
+    UiFramework.dialogs.modal.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
+ */
+export function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
+    React.useEffect(() => {
+        const handleProcessSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
+            saveFunction(closeFunc, closeFuncArgs);
+        };
+        return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);
+    }, [saveFunction, settingsManager]);
+}
+/** 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 function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
+    React.useEffect(() => {
+        const handleProcessSettingsTabActivation = ({ tabSelectionFunc, requestedSettingsTabId }) => {
+            saveFunction(tabSelectionFunc, requestedSettingsTabId);
+        };
+        return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);
+    }, [saveFunction, settingsManager]);
+}
+/**
+ * SettingsContainer component that displays Setting Tabs on Left and the P
+ * Note: that SettingsContainer is not rendered if tabs array is empty
+ * @public
+ */
+export 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 && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
+            return currentSettingsTab;
+        else
+            return tabs[0];
+    });
+    const processTabSelection = React.useCallback((tab) => {
+        if (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: 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, { 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))));
+};
 //# sourceMappingURL=SettingsContainer.js.map