@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

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

@@ -0,0 +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;
+//# sourceMappingURL=SettingsContainer.d.ts.map

package/lib/esm/core-react/settings/SettingsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsContainer.d.ts","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAA+G,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAiBnL;;GAEG;AACH,wBAAgB,qCAAqC,CAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,KAAK,IAAI,QAOlK;AAED;;GAEG;AACH,wBAAgB,qCAAqC,CAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,sBAAsB,CAAC,EAAE,MAAM,KAAK,IAAI,QAOrL;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,gBAAgB,EAAE,CAAC;IAEzB,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IAEtC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAExD,eAAe,EAAE,eAAe,CAAC;IAEjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,qFAAoF,sBAAsB,gBAgFvI,CAAC"}

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

@@ -0,0 +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.
+    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
+ */
+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

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

@@ -0,0 +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"]}

package/lib/esm/core-react/settings/SettingsContainer.scss

@@ -0,0 +1,65 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@import "../style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+div.core-settings-container {
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  .core-settings-container-left {
+    min-width: 15em;
+    height: 100%;
+    overflow: auto;
+    >.uicore-tabs-vertical {
+      font-size: 16px;
+    }
+  }
+  .core-settings-container-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--buic-background-dialog);
+    align-content: center;
+
+    .core-settings-container-right-header {
+      display: flex;
+      width: 100%;
+      height: ($iui-font-size-title * 2);
+      font-size: $iui-font-size-title;
+      font-weight: $iui-font-weight-semibold;
+      padding-left: 15px;
+      align-items: center;
+
+      .core-settings-container-main-sub-header {
+        position: relative;
+        padding-left: 20px;
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 10px;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    .core-settings-container-right-contents {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}

package/lib/esm/core-react/settings/SettingsManager.d.ts

@@ -0,0 +1,133 @@
+/** @packageDocumentation
+ * @module Settings
+ */
+/// <reference types="react" />
+import { BeUiEvent } from "@itwin/core-bentley";
+import { ConditionalBooleanValue } from "@itwin/appui-abstract";
+/** Interface used to populate a tab entry in the SettingContainer control
+ * @public
+ */
+export interface SettingsTabEntry {
+    /** unique id for entry */
+    readonly tabId: string;
+    /** localized display label */
+    readonly label: string;
+    /** Setting page content to display when tab item is selected. */
+    readonly page: JSX.Element;
+    /** Setting to true if page will register to watch for stage closing event so it can save any dirty settings. Page component should register and handle the events:
+     * `settingsManager.onProcessSettingsTabActivation` and `settingsManager.onProcessSettingsContainerClose` */
+    readonly pageWillHandleCloseRequest?: boolean;
+    /** used to determine position in tablist */
+    readonly itemPriority: number;
+    /** Optional Subtitle to show below label. */
+    readonly subLabel?: string;
+    /** Icon specification */
+    readonly icon?: string | JSX.Element;
+    /** Tooltip. Allows JSX|Element to support react-tooltip component */
+    readonly tooltip?: string | JSX.Element;
+    /** Allows Settings entry to be disabled */
+    readonly isDisabled?: boolean | ConditionalBooleanValue;
+}
+/** Event class for [[this.onSettingsProvidersChanged]] which is emitted when a new SettingsTabsProvider is added or removed.
+ * @public
+ */
+export declare class SettingsProvidersChangedEvent extends BeUiEvent<SettingsProvidersChangedEventArgs> {
+}
+/** Arguments of [[this.onSettingsProvidersChanged]] event.
+ * @public
+ */
+export interface SettingsProvidersChangedEventArgs {
+    readonly providers: ReadonlyArray<SettingsTabsProvider>;
+}
+/** Event class for [[this.onProcessSettingsTabActivation]] which is emitted when a new Tab needs to be activated. This allows the current
+ * settings page to save its settings before activating the new SettingTab.
+ * @public
+ */
+export declare class ProcessSettingsTabActivationEvent extends BeUiEvent<ProcessSettingsTabActivationEventArgs> {
+}
+/** Arguments of [[this.onProcessSettingsTabActivation]] event.
+ * @public
+ */
+export interface ProcessSettingsTabActivationEventArgs {
+    readonly tabSelectionFunc: (tabId: string) => void;
+    readonly requestedSettingsTabId: string;
+}
+/** Event class for [[this.onProcessSettingsContainerClose]] which is emitted when the settings container will be closed. This allows the current
+ * settings page to save its settings before calling the function to close the container.
+ * @public
+ */
+export declare class ProcessSettingsContainerCloseEvent extends BeUiEvent<ProcessSettingsContainerCloseEventArgs> {
+}
+/** Event class for [[this.onCloseSettingsContainer]] which is monitored by the settings container and indicates that some out process want to close the settings container.
+ * @internal
+ */
+export declare class CloseSettingsContainerEvent extends BeUiEvent<ProcessSettingsContainerCloseEventArgs> {
+}
+/** Arguments of [[this.onProcessSettingsContainerClose]] event.
+ * @public
+ */
+export interface ProcessSettingsContainerCloseEventArgs {
+    readonly closeFunc: (args: any) => void;
+    readonly closeFuncArgs?: any;
+}
+/** Event class for [[this.onActivateSettingsTab]] which is emitted when API call needs to set the active settings tab (ie via Tool key-in).
+ * @public
+ */
+export declare class ActivateSettingsTabEvent extends BeUiEvent<ActivateSettingsTabEventArgs> {
+}
+/** Arguments of [[this.onActivateSettingsTab]] event.
+ * @public
+ */
+export interface ActivateSettingsTabEventArgs {
+    readonly settingsTabId: string;
+}
+/** Setting Provider interface. Implemented by classes that want to supply settings pages for display in the SettingContainer. The
+ * classes that implement this interface need to be registered with the [[SettingsManager]].
+ * @public
+ */
+export interface SettingsTabsProvider {
+    /** Id of provider, used to remove registration. */
+    readonly id: string;
+    getSettingEntries(stageId: string, stageUsage: string): ReadonlyArray<SettingsTabEntry> | undefined;
+}
+/** Settings Manager class. Hold registration of settings providers and supplies events for the provided settings pages to listen.
+ * @public
+ */
+export declare class SettingsManager {
+    private _providers;
+    /** Event raised when SettingsProviders are changed.
+     */
+    readonly onSettingsProvidersChanged: SettingsProvidersChangedEvent;
+    /** Event raised solely for a settings page to monitor so it can save its settings before continuing tab activation.
+     * See React hook function `useSaveBeforeActivatingNewSettingsTab`.
+     */
+    readonly onProcessSettingsTabActivation: ProcessSettingsTabActivationEvent;
+    /** Event raised when the settings container will be closed. Any setting page component that is 'modal' should register to
+     * listen to this event so that it can save its state before closing. See React hook function `useSaveBeforeClosingSettingsContainer`.
+     */
+    readonly onProcessSettingsContainerClose: ProcessSettingsContainerCloseEvent;
+    /** Event raised to change the active settings tab shown in UI. Monitored by the SettingsContainer.
+     * @internal
+     */
+    readonly onActivateSettingsTab: ActivateSettingsTabEvent;
+    /** Event monitored by SettingsContainer to process request to close the settings container.
+     * @internal
+     */
+    readonly onCloseSettingsContainer: CloseSettingsContainerEvent;
+    /** @public */
+    get providers(): ReadonlyArray<SettingsTabsProvider>;
+    set providers(p: ReadonlyArray<SettingsTabsProvider>);
+    /** Called by application when an tool, keyin, or other process want to change the active settings tab/page giving the current tab/page and opportunity
+     * to save its state.
+     */
+    activateSettingsTab(settingsTabId: string): void;
+    /** Called by application when the Settings Container is to be closed. The function to invoke to actually close the Settings Container is
+     * passed in and executed once the active settings tab/page has a chance to save its settings.
+     */
+    closeSettingsContainer(closeFunc: (args: any) => void, closeFuncArgs?: any): void;
+    addSettingsProvider(settingsProvider: SettingsTabsProvider): void;
+    removeSettingsProvider(providerId: string): boolean;
+    /** Get an array of SettingsTabEntry objects to populate the settings container. */
+    getSettingEntries(stageId: string, stageUsage: string): Array<SettingsTabEntry>;
+}
+//# sourceMappingURL=SettingsManager.d.ts.map

package/lib/esm/core-react/settings/SettingsManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsManager.d.ts","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsManager.tsx"],"names":[],"mappings":"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"}

package/lib/esm/core-react/settings/SettingsManager.js

@@ -0,0 +1,114 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { BeUiEvent, Logger } from "@itwin/core-bentley";
+import { UiCore } from "../UiCore";
+/** Event class for [[this.onSettingsProvidersChanged]] which is emitted when a new SettingsTabsProvider is added or removed.
+ * @public
+ */
+export class SettingsProvidersChangedEvent extends BeUiEvent {
+}
+/** Event class for [[this.onProcessSettingsTabActivation]] which is emitted when a new Tab needs to be activated. This allows the current
+ * settings page to save its settings before activating the new SettingTab.
+ * @public
+ */
+export class ProcessSettingsTabActivationEvent extends BeUiEvent {
+}
+/** Event class for [[this.onProcessSettingsContainerClose]] which is emitted when the settings container will be closed. This allows the current
+ * settings page to save its settings before calling the function to close the container.
+ * @public
+ */
+export class ProcessSettingsContainerCloseEvent extends BeUiEvent {
+}
+/** Event class for [[this.onCloseSettingsContainer]] which is monitored by the settings container and indicates that some out process want to close the settings container.
+ * @internal
+ */
+export class CloseSettingsContainerEvent extends BeUiEvent {
+}
+/** Event class for [[this.onActivateSettingsTab]] which is emitted when API call needs to set the active settings tab (ie via Tool key-in).
+ * @public
+ */
+export class ActivateSettingsTabEvent extends BeUiEvent {
+}
+/** Settings Manager class. Hold registration of settings providers and supplies events for the provided settings pages to listen.
+ * @public
+ */
+export class SettingsManager {
+    constructor() {
+        this._providers = [];
+        /** Event raised when SettingsProviders are changed.
+         */
+        this.onSettingsProvidersChanged = new SettingsProvidersChangedEvent();
+        /** Event raised solely for a settings page to monitor so it can save its settings before continuing tab activation.
+         * See React hook function `useSaveBeforeActivatingNewSettingsTab`.
+         */
+        this.onProcessSettingsTabActivation = new ProcessSettingsTabActivationEvent();
+        /** Event raised when the settings container will be closed. Any setting page component that is 'modal' should register to
+         * listen to this event so that it can save its state before closing. See React hook function `useSaveBeforeClosingSettingsContainer`.
+         */
+        this.onProcessSettingsContainerClose = new ProcessSettingsContainerCloseEvent();
+        /** Event raised to change the active settings tab shown in UI. Monitored by the SettingsContainer.
+         * @internal
+         */
+        this.onActivateSettingsTab = new ActivateSettingsTabEvent();
+        /** Event monitored by SettingsContainer to process request to close the settings container.
+         * @internal
+         */
+        this.onCloseSettingsContainer = new CloseSettingsContainerEvent();
+    }
+    /** @public */
+    get providers() { return this._providers; }
+    set providers(p) {
+        this._providers = p;
+        this.onSettingsProvidersChanged.emit({ providers: p });
+    }
+    /** Called by application when an tool, keyin, or other process want to change the active settings tab/page giving the current tab/page and opportunity
+     * to save its state.
+     */
+    activateSettingsTab(settingsTabId) {
+        this.onActivateSettingsTab.emit({ settingsTabId });
+    }
+    /** Called by application when the Settings Container is to be closed. The function to invoke to actually close the Settings Container is
+     * passed in and executed once the active settings tab/page has a chance to save its settings.
+     */
+    closeSettingsContainer(closeFunc, closeFuncArgs) {
+        this.onCloseSettingsContainer.emit({ closeFunc, closeFuncArgs });
+    }
+    addSettingsProvider(settingsProvider) {
+        const foundProvider = this._providers.find((p) => p.id === settingsProvider.id);
+        if (!foundProvider) {
+            const updatedProviders = [
+                ...this.providers,
+                settingsProvider,
+            ];
+            this.providers = updatedProviders;
+        }
+        else {
+            Logger.logInfo(UiCore.loggerCategory(this), `Settings Provider with id of ${settingsProvider.id} has already been registered`);
+        }
+    }
+    removeSettingsProvider(providerId) {
+        let result = false;
+        const updatedProviders = this._providers.filter((p) => p.id !== providerId);
+        if (updatedProviders.length !== this._providers.length) {
+            this.providers = updatedProviders;
+            result = true;
+        }
+        return result;
+    }
+    /** Get an array of SettingsTabEntry objects to populate the settings container. */
+    getSettingEntries(stageId, stageUsage) {
+        const allSettingEntries = [];
+        // Consult the registered SettingsProviders
+        this._providers.forEach((p) => {
+            const entries = p.getSettingEntries(stageId, stageUsage);
+            entries && allSettingEntries.push(...entries);
+        });
+        return allSettingEntries;
+    }
+}
+//# sourceMappingURL=SettingsManager.js.map