@itwin/tree-widget-react 0.7.2 → 0.9.0-dev.2

package/lib/cjs/components/utils/IsPromiseLike.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPromiseLike = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** Checks if the specified argument is a promise */
+function isPromiseLike(obj) {
+    return !!(obj && (typeof obj === "object") && (typeof obj.then === "function"));
+}
+exports.isPromiseLike = isPromiseLike;
+//# sourceMappingURL=IsPromiseLike.js.map

package/lib/cjs/components/utils/IsPromiseLike.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IsPromiseLike.js","sourceRoot":"","sources":["../../../../src/components/utils/IsPromiseLike.ts"],"names":[],"mappings":";;;AAAA;;;+FAG+F;AAC/F,oDAAoD;AACpD,SAAgB,aAAa,CAAC,GAAY;IACxC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,IAAI,CAAC,OAAQ,GAAW,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC;AAC3F,CAAC;AAFD,sCAEC","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/** Checks if the specified argument is a promise */\nexport function isPromiseLike(obj: unknown): obj is PromiseLike<unknown> {\n  return !!(obj && (typeof obj === \"object\") && (typeof (obj as any).then === \"function\"));\n}\n"]}

package/lib/cjs/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { SpatialContainmentTreeProps, StagePanelLocation, StagePanelSection } from "@itwin/appui-react";
+import { StagePanelLocation, StagePanelSection } from "@itwin/appui-react";
 import type { SelectableContentDefinition } from "@itwin/components-react";
 import type { IModelConnection, ScreenViewport } from "@itwin/core-frontend";
 import type { CategoryTreeProps } from "./components/trees/category-tree/CategoriesTree";
@@ -24,7 +24,6 @@ export interface ModelTreeProps extends Omit<ModelsTreeProps, "iModel" | "active
 export interface CategoriesTreeProps extends Omit<CategoryTreeProps, "iModel" | "activeView" | "width" | "height" | "filterInfo" | "onFilterApplied" | "categories"> {
     headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;
 }
-export declare type SpatialTreeProps = Omit<SpatialContainmentTreeProps, "iModel" | "width" | "height">;
 export declare const ModelsTreeId = "models-tree";
 export declare const CategoriesTreeId = "categories-tree";
 export declare const SpatialContainmentTreeId = "spatial-containment-tree";
@@ -36,12 +35,10 @@ export interface TreeWidgetOptions {
     additionalTrees?: SelectableContentDefinition[];
     modelsTreeProps?: ModelTreeProps;
     categoriesTreeProps?: CategoriesTreeProps;
-    spatialTreeProps?: SpatialTreeProps;
     defaultTreeId?: string;
     hideTrees?: {
         modelsTree?: boolean;
         categoriesTree?: boolean;
-        spatialTree?: boolean;
     };
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/cjs/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAoDlF,QAAA,YAAY,GAAG,aAAa,CAAC;AAE7B,QAAA,gBAAgB,GAAG,iBAAiB,CAAC;AAErC,QAAA,wBAAwB,GAAG,0BAA0B,CAAC","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\nimport type { SpatialContainmentTreeProps, StagePanelLocation, StagePanelSection } from \"@itwin/appui-react\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { CategoryTreeProps } from \"./components/trees/category-tree/CategoriesTree\";\nimport type { ModelsTreeProps } from \"./components/trees/models-tree/ModelsTree\";\nimport type { CategoryInfo, ModelInfo } from \"./tree-widget-react\";\n\nexport interface TreeHeaderButtonProps {\n  viewport: ScreenViewport;\n}\n\nexport interface ModelsTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  models: ModelInfo[];\n}\n\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  categories: CategoryInfo[];\n  filteredCategories?: CategoryInfo[];\n}\n\nexport interface IModelContentTreeProps\n  extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"children\"> {\n  iModel: IModelConnection;\n}\n\nexport interface ModelTreeProps extends Omit<ModelsTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n> { headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode> }\n\nexport interface CategoriesTreeProps extends Omit<CategoryTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n| \"categories\"\n> { headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode> }\n\nexport type SpatialTreeProps = Omit<\n// eslint-disable-next-line deprecation/deprecation\nSpatialContainmentTreeProps,\n\"iModel\" | \"width\" | \"height\"\n>;\n\nexport const ModelsTreeId = \"models-tree\";\n\nexport const CategoriesTreeId = \"categories-tree\";\n\nexport const SpatialContainmentTreeId = \"spatial-containment-tree\";\n\nexport interface TreeWidgetOptions {\n  defaultPanelLocation?: StagePanelLocation;\n  defaultPanelSection?: StagePanelSection;\n  defaultTreeWidgetPriority?: number;\n  enableElementsClassGrouping?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  modelsTreeProps?: ModelTreeProps;\n  categoriesTreeProps?: CategoriesTreeProps;\n  spatialTreeProps?: SpatialTreeProps;\n  defaultTreeId?: string;\n  hideTrees?: {\n    modelsTree?: boolean;\n    categoriesTree?: boolean;\n    spatialTree?: boolean;\n  };\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AA8ClF,QAAA,YAAY,GAAG,aAAa,CAAC;AAE7B,QAAA,gBAAgB,GAAG,iBAAiB,CAAC;AAErC,QAAA,wBAAwB,GAAG,0BAA0B,CAAC","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\nimport { StagePanelLocation, StagePanelSection } from \"@itwin/appui-react\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { CategoryTreeProps } from \"./components/trees/category-tree/CategoriesTree\";\nimport type { ModelsTreeProps } from \"./components/trees/models-tree/ModelsTree\";\nimport type { CategoryInfo, ModelInfo } from \"./tree-widget-react\";\n\nexport interface TreeHeaderButtonProps {\n  viewport: ScreenViewport;\n}\n\nexport interface ModelsTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  models: ModelInfo[];\n}\n\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  categories: CategoryInfo[];\n  filteredCategories?: CategoryInfo[];\n}\n\nexport interface IModelContentTreeProps\n  extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"children\"> {\n  iModel: IModelConnection;\n}\n\nexport interface ModelTreeProps extends Omit<ModelsTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n> { headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode> }\n\nexport interface CategoriesTreeProps extends Omit<CategoryTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n| \"categories\"\n> { headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode> }\n\nexport const ModelsTreeId = \"models-tree\";\n\nexport const CategoriesTreeId = \"categories-tree\";\n\nexport const SpatialContainmentTreeId = \"spatial-containment-tree\";\n\nexport interface TreeWidgetOptions {\n  defaultPanelLocation?: StagePanelLocation;\n  defaultPanelSection?: StagePanelSection;\n  defaultTreeWidgetPriority?: number;\n  enableElementsClassGrouping?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  modelsTreeProps?: ModelTreeProps;\n  categoriesTreeProps?: CategoriesTreeProps;\n  defaultTreeId?: string;\n  hideTrees?: {\n    modelsTree?: boolean;\n    categoriesTree?: boolean;\n  };\n}\n"]}

package/lib/esm/TreeWidget.js

@@ -23,7 +23,7 @@ export class TreeWidget {
     /** Unregisters the TreeWidget internationalization service namespace */
     static terminate() {
         if (TreeWidget._i18n)
-            TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);
+            TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace); // eslint-disable-line @itwin/no-internal
         TreeWidget._i18n = undefined;
         TreeWidget._initialized = false;
     }

package/lib/esm/TreeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,YAAY,CAAC;QAElD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK;YAClB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;QACjE,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;QAC7B,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,OAAO,CACf,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAC/B,4BAA4B,CAC7B,CAAC;QACJ,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAEM,MAAM,KAAK,WAAW;QAC3B,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CACrB,GAAsB,EACtB,OAA6B;QAE7B,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CACvC,SAAS,EACT,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GACZ,UAAU,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9D,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF","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\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type { Localization } from \"@itwin/core-common\";\nimport type { LocalizationOptions } from \"@itwin/core-i18n\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   */\n  public static async initialize(i18n?: Localization): Promise<void> {\n    if (this._initialized) return;\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n)\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n    TreeWidget._i18n = undefined;\n    TreeWidget._initialized = false;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n)\n      throw new UiError(\n        TreeWidget.loggerCategory(this),\n        \"TreeWidget not initialized\"\n      );\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(\n      stringKey,\n      options\n    );\n  }\n\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      TreeWidget.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,YAAY,CAAC;QAElD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK;YAClB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,yCAAyC;QAC3G,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;QAC7B,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,OAAO,CACf,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAC/B,4BAA4B,CAC7B,CAAC;QACJ,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAEM,MAAM,KAAK,WAAW;QAC3B,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CACrB,GAAsB,EACtB,OAA6B;QAE7B,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CACvC,SAAS,EACT,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GACZ,UAAU,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9D,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF","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\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type { Localization } from \"@itwin/core-common\";\nimport type { LocalizationOptions } from \"@itwin/core-i18n\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   */\n  public static async initialize(i18n?: Localization): Promise<void> {\n    if (this._initialized) return;\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n)\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace); // eslint-disable-line @itwin/no-internal\n    TreeWidget._i18n = undefined;\n    TreeWidget._initialized = false;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n)\n      throw new UiError(\n        TreeWidget.loggerCategory(this),\n        \"TreeWidget not initialized\"\n      );\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(\n      stringKey,\n      options\n    );\n  }\n\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      TreeWidget.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}

package/lib/esm/components/TreeWidgetComponent.scss

@@ -2,10 +2,10 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
+@import "~@itwin/itwinui-variables";
 
 .tree-widget-visibility-widget {
-  padding: $uicore-s;
+  padding: var(--iui-size-xs);
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -19,7 +19,7 @@
   .components-selectable-content-header {
     display: flex;
     align-items: center;
-    margin-bottom: $uicore-xs;
+    margin-bottom: var(--iui-size-2xs);
 
     .uicore-reactSelectTop {
       flex: 1;
@@ -37,7 +37,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: $uicore-xs;
+    margin-bottom: var(--iui-size-2xs);
 
     .tree-toolbar-searchbox {
       margin-left: auto;
@@ -50,7 +50,7 @@
 }
 
 .tree-widget-select {
-  margin-bottom: $uicore-xs;
+  margin-bottom: var(--iui-size-2xs);
 }
 
 .tree-widget-tree-container {
@@ -60,5 +60,5 @@
 }
 
 .tree-widget-search-bar {
-  margin-bottom: 4px;
+  margin-bottom: var(--iui-size-2xs);
 }

package/lib/esm/components/TreeWidgetUiItemsProvider.d.ts

@@ -1,11 +1,10 @@
-import { AbstractZoneLocation } from "@itwin/appui-abstract";
-import { CommonWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider } from "@itwin/appui-react";
+import { StagePanelLocation, StagePanelSection, UiItemsProvider, Widget } from "@itwin/appui-react";
 import { TreeWidgetOptions } from "../types";
 export declare const TreeWidgetId = "tree-widget-react:trees";
 export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {
     private _treeWidgetOptions?;
     readonly id = "TreeWidgetUiItemsProvider";
     constructor(_treeWidgetOptions?: TreeWidgetOptions | undefined);
-    provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection, zoneLocation?: AbstractZoneLocation): ReadonlyArray<CommonWidgetProps>;
+    provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray<Widget>;
 }
 //# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -4,14 +4,12 @@
 *--------------------------------------------------------------------------------------------*/
 /* eslint-disable react/display-name */
 import React from "react";
-import { AbstractZoneLocation } from "@itwin/appui-abstract";
-import { StagePanelLocation, StagePanelSection, StageUsage, UiFramework } from "@itwin/appui-react";
+import { StagePanelLocation, StagePanelSection, StageUsage } from "@itwin/appui-react";
 import { TreeWidget } from "../TreeWidget";
-import { CategoriesTreeId, ModelsTreeId, SpatialContainmentTreeId } from "../types";
+import { CategoriesTreeId, ModelsTreeId } from "../types";
 import { CategoriesTreeComponent } from "./trees/category-tree/CategoriesTreeComponent";
 import { ClassGroupingOption } from "./trees/Common";
 import { ModelsTreeComponent } from "./trees/models-tree/ModelsTreeComponent";
-import { SpatialTreeComponent } from "./trees/spatial-tree/SpatialTreeComponent";
 import { TreeWidgetComponent } from "./TreeWidgetComponent";
 export const TreeWidgetId = "tree-widget-react:trees";
 export class TreeWidgetUiItemsProvider {
@@ -19,18 +17,14 @@ export class TreeWidgetUiItemsProvider {
         this._treeWidgetOptions = _treeWidgetOptions;
         this.id = "TreeWidgetUiItemsProvider";
     }
-    provideWidgets(_stageId, stageUsage, location, section, 
-    // eslint-disable-next-line deprecation/deprecation
-    zoneLocation) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    provideWidgets(_stageId, stageUsage, location, section) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const widgets = [];
         const preferredLocation = (_b = (_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.defaultPanelLocation) !== null && _b !== void 0 ? _b : StagePanelLocation.Right;
         const preferredPanelSection = (_d = (_c = this._treeWidgetOptions) === null || _c === void 0 ? void 0 : _c.defaultPanelSection) !== null && _d !== void 0 ? _d : StagePanelSection.Start;
-        if (
-        // eslint-disable-next-line deprecation/deprecation
-        (!section && stageUsage === StageUsage.General && zoneLocation === AbstractZoneLocation.CenterRight) ||
-            // eslint-disable-next-line deprecation/deprecation
-            (stageUsage === StageUsage.General && location === preferredLocation && section === preferredPanelSection && UiFramework.uiVersion !== "1")) {
+        if (location === preferredLocation &&
+            section === preferredPanelSection &&
+            stageUsage === StageUsage.General) {
             const trees = [];
             if (!((_f = (_e = this._treeWidgetOptions) === null || _e === void 0 ? void 0 : _e.hideTrees) === null || _f === void 0 ? void 0 : _f.modelsTree)) {
                 trees.push({
@@ -54,22 +48,10 @@ export class TreeWidgetUiItemsProvider {
                     },
                 });
             }
-            if (!((_k = (_j = this._treeWidgetOptions) === null || _j === void 0 ? void 0 : _j.hideTrees) === null || _k === void 0 ? void 0 : _k.spatialTree)) {
-                trees.push({
-                    label: TreeWidget.translate("containment"),
-                    id: SpatialContainmentTreeId,
-                    render: () => {
-                        var _a, _b;
-                        return (React.createElement(SpatialTreeComponent, { enableElementsClassGrouping: ((_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.enableElementsClassGrouping)
-                                ? ClassGroupingOption.YesWithCounts
-                                : ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.spatialTreeProps }));
-                    },
-                });
-            }
-            if ((_l = this._treeWidgetOptions) === null || _l === void 0 ? void 0 : _l.additionalTrees) {
+            if ((_j = this._treeWidgetOptions) === null || _j === void 0 ? void 0 : _j.additionalTrees) {
                 trees.push(...this._treeWidgetOptions.additionalTrees);
             }
-            if (((_m = this._treeWidgetOptions) === null || _m === void 0 ? void 0 : _m.defaultTreeId) && trees.length !== 0) {
+            if (((_k = this._treeWidgetOptions) === null || _k === void 0 ? void 0 : _k.defaultTreeId) && trees.length !== 0) {
                 // Adding the defaultTree to first index
                 const { defaultTreeId } = this._treeWidgetOptions;
                 const extractedDefaultTree = trees.filter((tree) => tree.id === defaultTreeId)[0];
@@ -79,10 +61,9 @@ export class TreeWidgetUiItemsProvider {
             widgets.push({
                 id: TreeWidgetId,
                 label: TreeWidget.translate("treeview"),
-                getWidgetContent: () => React.createElement(TreeWidgetComponent, { trees: trees }),
+                content: React.createElement(TreeWidgetComponent, { trees: trees }),
                 icon: "icon-hierarchy-tree",
-                restoreTransientState: () => true,
-                priority: (_o = this._treeWidgetOptions) === null || _o === void 0 ? void 0 : _o.defaultTreeWidgetPriority,
+                priority: (_l = this._treeWidgetOptions) === null || _l === void 0 ? void 0 : _l.defaultTreeWidgetPriority,
             });
         }
         return widgets;

package/lib/esm/components/TreeWidgetUiItemsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.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/* eslint-disable react/display-name */\n\nimport React from \"react\";\nimport { AbstractZoneLocation } from \"@itwin/appui-abstract\";\nimport { CommonWidgetProps, StagePanelLocation, StagePanelSection, StageUsage, UiFramework, UiItemsProvider } from \"@itwin/appui-react\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { CategoriesTreeId, ModelsTreeId, SpatialContainmentTreeId, TreeWidgetOptions } from \"../types\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ClassGroupingOption } from \"./trees/Common\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { SpatialTreeComponent } from \"./trees/spatial-tree/SpatialTreeComponent\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\n\nexport const TreeWidgetId = \"tree-widget-react:trees\";\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) { }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    section?: StagePanelSection,\n    // eslint-disable-next-line deprecation/deprecation\n    zoneLocation?: AbstractZoneLocation,\n  ): ReadonlyArray<CommonWidgetProps> {\n    const widgets: CommonWidgetProps[] = [];\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n    if (\n      // eslint-disable-next-line deprecation/deprecation\n      (!section && stageUsage === StageUsage.General && zoneLocation === AbstractZoneLocation.CenterRight) ||\n      // eslint-disable-next-line deprecation/deprecation\n      (stageUsage === StageUsage.General && location === preferredLocation && section === preferredPanelSection && UiFramework.uiVersion !== \"1\")\n    ) {\n      const trees: SelectableContentDefinition[] = [];\n\n      if (!this._treeWidgetOptions?.hideTrees?.modelsTree) {\n        trees.push({\n          label: TreeWidget.translate(\"models\"),\n          id: ModelsTreeId,\n          render: () => (\n            <ModelsTreeComponent\n              enableElementsClassGrouping={\n                this._treeWidgetOptions?.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              {...this._treeWidgetOptions?.modelsTreeProps}\n            />\n          ),\n        });\n      }\n\n      if (!this._treeWidgetOptions?.hideTrees?.categoriesTree) {\n        trees.push({\n          label: TreeWidget.translate(\"categories\"),\n          id: CategoriesTreeId,\n          render: () => (\n            <CategoriesTreeComponent {...this._treeWidgetOptions?.categoriesTreeProps} />\n          ),\n        });\n      }\n\n      if (!this._treeWidgetOptions?.hideTrees?.spatialTree) {\n        trees.push({\n          label: TreeWidget.translate(\"containment\"),\n          id: SpatialContainmentTreeId,\n          render: () => (\n            <SpatialTreeComponent\n              enableElementsClassGrouping={\n                this._treeWidgetOptions?.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              {...this._treeWidgetOptions?.spatialTreeProps}\n            />\n          ),\n        });\n      }\n\n      if (this._treeWidgetOptions?.additionalTrees) {\n        trees.push(...this._treeWidgetOptions.additionalTrees);\n      }\n\n      if (this._treeWidgetOptions?.defaultTreeId && trees.length !== 0) {\n        // Adding the defaultTree to first index\n        const { defaultTreeId } = this._treeWidgetOptions;\n        const extractedDefaultTree = trees.filter((tree) => tree.id === defaultTreeId)[0];\n        const index = trees.indexOf(extractedDefaultTree);\n        trees.unshift(trees.splice(index, 1)[0]);\n      }\n\n      widgets.push({\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        getWidgetContent: () => <TreeWidgetComponent trees={trees} />,\n        icon: \"icon-hierarchy-tree\",\n        restoreTransientState: () => true,\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.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/* eslint-disable react/display-name */\n\nimport React from \"react\";\nimport { StagePanelLocation, StagePanelSection, StageUsage, UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { CategoriesTreeId, ModelsTreeId, TreeWidgetOptions } from \"../types\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ClassGroupingOption } from \"./trees/Common\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\n\nexport const TreeWidgetId = \"tree-widget-react:trees\";\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) { }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    section?: StagePanelSection\n  ): ReadonlyArray<Widget> {\n    const widgets: Widget[] = [];\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n    if (\n      location === preferredLocation &&\n      section === preferredPanelSection &&\n      stageUsage === StageUsage.General\n    ) {\n      const trees: SelectableContentDefinition[] = [];\n\n      if (!this._treeWidgetOptions?.hideTrees?.modelsTree) {\n        trees.push({\n          label: TreeWidget.translate(\"models\"),\n          id: ModelsTreeId,\n          render: () => (\n            <ModelsTreeComponent\n              enableElementsClassGrouping={\n                this._treeWidgetOptions?.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              {...this._treeWidgetOptions?.modelsTreeProps}\n            />\n          ),\n        });\n      }\n\n      if (!this._treeWidgetOptions?.hideTrees?.categoriesTree) {\n        trees.push({\n          label: TreeWidget.translate(\"categories\"),\n          id: CategoriesTreeId,\n          render: () => (\n            <CategoriesTreeComponent {...this._treeWidgetOptions?.categoriesTreeProps} />\n          ),\n        });\n      }\n\n      if (this._treeWidgetOptions?.additionalTrees) {\n        trees.push(...this._treeWidgetOptions.additionalTrees);\n      }\n\n      if (this._treeWidgetOptions?.defaultTreeId && trees.length !== 0) {\n        // Adding the defaultTree to first index\n        const { defaultTreeId } = this._treeWidgetOptions;\n        const extractedDefaultTree = trees.filter((tree) => tree.id === defaultTreeId)[0];\n        const index = trees.indexOf(extractedDefaultTree);\n        trees.unshift(trees.splice(index, 1)[0]);\n      }\n\n      widgets.push({\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        content: <TreeWidgetComponent trees={trees} />,\n        icon: \"icon-hierarchy-tree\",\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}

package/lib/esm/components/search-bar/SearchBar.js

@@ -45,7 +45,7 @@ export class SearchBar extends React.PureComponent {
             enableGrouping && React.createElement("div", { className: contentClassName },
                 React.createElement(ButtonGroup, { overflowButton: (overflowStart) => (React.createElement(DropdownMenu, { menuItems: () => React.Children.toArray(this.props.children)
                             .slice(overflowStart === 0 ? 0 : overflowStart - 1)
-                            .map((btn, index) => React.createElement(MenuItem, { key: index }, btn)), className: "search-bar-dropdown-container" },
+                            .map((btn, index) => React.createElement(MenuItem, { key: index, className: "search-bar-dropdown-menu-item" }, btn)), className: "search-bar-dropdown-container" },
                         React.createElement(IconButton, { styleType: "borderless", size: "small" },
                             React.createElement(SvgMore, null)))) }, this.props.children)),
             showSearch ? (React.createElement("div", { className: "search-bar-search-container" },

package/lib/esm/components/search-bar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBar.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { SearchBox } from \"./SearchBox\";\nimport \"./SearchBar.scss\";\nimport {\n  ButtonGroup,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport { SvgMore, SvgSearch } from \"@itwin/itwinui-icons-react\";\n\nexport enum Alignment {\n  Left = 0,\n  Right = 1,\n}\n\nexport interface SearchBarProps extends CommonProps {\n  /** value to set SearchBox */\n  value?: string;\n  /** Enable or disable dropdown functionality. If disabled, searchbox simply expands without displaying the group button */\n  enableGrouping: boolean;\n  /** show the search box in the open (expanded) state */\n  showSearch?: boolean;\n  /** alignment content to the left or right of the search bar */\n  alignment?: Alignment;\n  /** searchbox frequency to poll for changes in value (milliseconds) */\n  valueChangedDelay?: number;\n  /** searchbox placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** title (tooltip) */\n  title?: string;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterClear?: () => void;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\ninterface SearchBarState {\n  showSearch: boolean;\n  showDropdown: boolean;\n}\n\n/** SearchBox with expanding search box capability */\nexport class SearchBar extends React.PureComponent<\nSearchBarProps,\nSearchBarState\n> {\n  private _searchBox = React.createRef<SearchBox>();\n\n  public static defaultProps: Partial<SearchBarProps> = {\n    alignment: Alignment.Right,\n    enableGrouping: true,\n  };\n\n  constructor(props: any) {\n    super(props);\n\n    this.state = { showSearch: props.showSearch, showDropdown: false };\n  }\n\n  public async componentDidUpdate(prevProps: SearchBarProps) {\n    if (prevProps.value !== this.props.value) {\n    }\n  }\n\n  private _onToggleSearch = (\n    _event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    const showSearch = !this.state.showSearch;\n    this.setState({ showSearch }, () => {\n      if (showSearch && this._searchBox.current)\n        setTimeout(() => {\n          if (this._searchBox.current) this._searchBox.current.focus();\n        }, 100); // timeout allows the search bar animation to complete!\n    });\n  };\n\n  public render() {\n    const {\n      value,\n      alignment,\n      valueChangedDelay,\n      placeholder,\n      enableGrouping,\n      title,\n    } = this.props;\n    const { showSearch } = this.state;\n\n    const classes = classnames(\"tree-widget-search-bar\", this.props.className);\n    const searchBoxClassName = classnames(\n      \"search-bar-search-box\",\n      showSearch && \"show\"\n    );\n    const searchIconClassName = classnames(\n      \"search-bar-search-icon\",\n      showSearch ? \"hide\" : \"show\"\n    );\n    const contentClassName = classnames(\n      \"search-bar-button-container\",\n      showSearch && \"contracted\",\n      alignment === Alignment.Right && \"right\"\n    );\n\n    return (\n      <div className={classes}>\n        {enableGrouping && <div className={contentClassName}>\n          <ButtonGroup\n            overflowButton={(overflowStart) => (\n              <DropdownMenu\n                menuItems={() =>\n                  React.Children.toArray(this.props.children)\n                    .slice(overflowStart === 0 ? 0 : overflowStart - 1)\n                    .map((btn, index) => <MenuItem key={index}>{btn}</MenuItem>)\n                }\n                className=\"search-bar-dropdown-container\"\n              >\n                <IconButton styleType=\"borderless\" size=\"small\">\n                  <SvgMore />\n                </IconButton>\n              </DropdownMenu>\n            )}\n          >\n            {this.props.children}\n          </ButtonGroup>\n        </div>}\n        {showSearch ? (\n          <div className=\"search-bar-search-container\">\n            <SearchBox\n              ref={this._searchBox}\n              className={searchBoxClassName}\n              searchText={value}\n              valueChangedDelay={valueChangedDelay}\n              placeholder={placeholder}\n              onClear={this.props.onFilterClear}\n              onFilterStart={this.props.onFilterStart}\n              resultCount={this.props.resultCount}\n              onIconClick={this._onToggleSearch}\n              onSelectedChanged={this.props.onSelectedChanged}\n            />\n          </div>\n        ) : (\n          <IconButton\n            className={searchIconClassName}\n            onClick={this._onToggleSearch}\n            title={title}\n            styleType=\"borderless\"\n            size=\"small\"\n          >\n            <SvgSearch />\n          </IconButton>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBar.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { SearchBox } from \"./SearchBox\";\nimport \"./SearchBar.scss\";\nimport {\n  ButtonGroup,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport { SvgMore, SvgSearch } from \"@itwin/itwinui-icons-react\";\n\nexport enum Alignment {\n  Left = 0,\n  Right = 1,\n}\n\nexport interface SearchBarProps extends CommonProps {\n  /** value to set SearchBox */\n  value?: string;\n  /** Enable or disable dropdown functionality. If disabled, searchbox simply expands without displaying the group button */\n  enableGrouping: boolean;\n  /** show the search box in the open (expanded) state */\n  showSearch?: boolean;\n  /** alignment content to the left or right of the search bar */\n  alignment?: Alignment;\n  /** searchbox frequency to poll for changes in value (milliseconds) */\n  valueChangedDelay?: number;\n  /** searchbox placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** title (tooltip) */\n  title?: string;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterClear?: () => void;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\ninterface SearchBarState {\n  showSearch: boolean;\n  showDropdown: boolean;\n}\n\n/** SearchBox with expanding search box capability */\nexport class SearchBar extends React.PureComponent<\nSearchBarProps,\nSearchBarState\n> {\n  private _searchBox = React.createRef<SearchBox>();\n\n  public static defaultProps: Partial<SearchBarProps> = {\n    alignment: Alignment.Right,\n    enableGrouping: true,\n  };\n\n  constructor(props: any) {\n    super(props);\n\n    this.state = { showSearch: props.showSearch, showDropdown: false };\n  }\n\n  public async componentDidUpdate(prevProps: SearchBarProps) {\n    if (prevProps.value !== this.props.value) {\n    }\n  }\n\n  private _onToggleSearch = (\n    _event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    const showSearch = !this.state.showSearch;\n    this.setState({ showSearch }, () => {\n      if (showSearch && this._searchBox.current)\n        setTimeout(() => {\n          if (this._searchBox.current) this._searchBox.current.focus();\n        }, 100); // timeout allows the search bar animation to complete!\n    });\n  };\n\n  public render() {\n    const {\n      value,\n      alignment,\n      valueChangedDelay,\n      placeholder,\n      enableGrouping,\n      title,\n    } = this.props;\n    const { showSearch } = this.state;\n\n    const classes = classnames(\"tree-widget-search-bar\", this.props.className);\n    const searchBoxClassName = classnames(\n      \"search-bar-search-box\",\n      showSearch && \"show\"\n    );\n    const searchIconClassName = classnames(\n      \"search-bar-search-icon\",\n      showSearch ? \"hide\" : \"show\"\n    );\n    const contentClassName = classnames(\n      \"search-bar-button-container\",\n      showSearch && \"contracted\",\n      alignment === Alignment.Right && \"right\"\n    );\n\n    return (\n      <div className={classes}>\n        {enableGrouping && <div className={contentClassName}>\n          <ButtonGroup\n            overflowButton={(overflowStart) => (\n              <DropdownMenu\n                menuItems={() =>\n                  React.Children.toArray(this.props.children)\n                    .slice(overflowStart === 0 ? 0 : overflowStart - 1)\n                    .map((btn, index) => <MenuItem key={index} className=\"search-bar-dropdown-menu-item\">{btn}</MenuItem>)\n                }\n                className=\"search-bar-dropdown-container\"\n              >\n                <IconButton styleType=\"borderless\" size=\"small\">\n                  <SvgMore />\n                </IconButton>\n              </DropdownMenu>\n            )}\n          >\n            {this.props.children}\n          </ButtonGroup>\n        </div>}\n        {showSearch ? (\n          <div className=\"search-bar-search-container\">\n            <SearchBox\n              ref={this._searchBox}\n              className={searchBoxClassName}\n              searchText={value}\n              valueChangedDelay={valueChangedDelay}\n              placeholder={placeholder}\n              onClear={this.props.onFilterClear}\n              onFilterStart={this.props.onFilterStart}\n              resultCount={this.props.resultCount}\n              onIconClick={this._onToggleSearch}\n              onSelectedChanged={this.props.onSelectedChanged}\n            />\n          </div>\n        ) : (\n          <IconButton\n            className={searchIconClassName}\n            onClick={this._onToggleSearch}\n            title={title}\n            styleType=\"borderless\"\n            size=\"small\"\n          >\n            <SvgSearch />\n          </IconButton>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/components/search-bar/SearchBar.scss

@@ -2,18 +2,41 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
 
 // Buttons dropdown container
 .search-bar-dropdown-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 6px;
+  margin-top: calc(var(--iui-size-2xs) + var(--iui-size-3xs));
+
+  .search-bar-dropdown-menu-item {
+    width: 100%;
+    padding: 0;
+
+    >.iui-content {
+      height: calc(var(--iui-size-xl) + var(--iui-size-2xs));
+
+      >.iui-menu-label {
+        height: 100%;
+
+        >.iui-button {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .search-bar-dropdown-menu-item:hover {
+    background-color: transparent;
+    cursor: default;
+  }
 }
 
 .tree-widget-header-tree-toolbar-icon {
-  color: $buic-icon-color;
+  border: 0;
+  padding: 0 calc(var(--iui-size-2xs) + var(--iui-size-3xs));
 }
 
 .tree-widget-search-bar {
@@ -25,14 +48,14 @@
   .search-bar-button-container {
     display: flex;
     align-items: center;
-    width: calc(100% - 26px);
+    width: calc(100% - var(--iui-size-l));
 
     &.right {
       justify-content: flex-end;
     }
 
     &.contracted {
-      width: 32px;
+      width: var(--iui-size-xl);
     }
   }
 
@@ -40,8 +63,8 @@
   .search-bar-search-icon {
     opacity: 0;
     transition: all 0.2s ease;
-    color: $buic-icon-color;
-    height: 32px;
+    color: var(--iui-color-text);
+    height: var(--iui-size-xl);
 
     &.show {
       opacity: 1;
@@ -54,7 +77,7 @@
     height: 100%;
 
     .search-bar-search-box {
-      height: 32px;
+      height: var(--iui-size-xl);
       float: right;
       margin-right: 0;
       box-sizing: border-box;
@@ -67,7 +90,7 @@
       &.show {
         visibility: visible;
         opacity: 1;
-        width: 100%
+        width: 100%;
       }
     }
   }

package/lib/esm/components/search-bar/SearchBox.js

@@ -5,7 +5,8 @@
 /** @module SearchBox */
 import * as React from "react";
 import classnames from "classnames";
-import { IconButton } from "../IconButton";
+import { SvgChevronDown, SvgChevronUp, SvgCloseSmall } from "@itwin/itwinui-icons-react";
+import { IconButton } from "@itwin/itwinui-react";
 import "./SearchBox.scss";
 import { TreeWidget } from "../../TreeWidget";
 /**
@@ -141,8 +142,6 @@ export class SearchBox extends React.PureComponent {
         const { searchText, selectedIndex } = this.state;
         const searchClassName = classnames("tree-widget-searchbox", className);
         const showCount = resultCount > 0;
-        const isPrevEnabled = selectedIndex > 1;
-        const isNextEnabled = selectedIndex < resultCount;
         return (React.createElement("div", { className: searchClassName, style: style },
             React.createElement("input", { value: searchText, ref: (el) => {
                     this._inputElement = el;
@@ -150,9 +149,12 @@ export class SearchBox extends React.PureComponent {
             React.createElement("div", { className: "searchbox-stepping-container" },
                 showCount && (React.createElement("span", { className: "searchbox-stepping-count" }, `${selectedIndex}/${resultCount}`)),
                 React.createElement("div", { className: "searchbox-separator" }),
-                React.createElement(IconButton, { className: "searchbox-step-button", icon: "icon-chevron-up", disabled: !isPrevEnabled, onClick: this._onPrevClick, title: "Previous" }),
-                React.createElement(IconButton, { className: "searchbox-step-button", icon: "icon-chevron-down", disabled: !isNextEnabled, onClick: this._onNextClick, title: "Next" })),
-            React.createElement("span", { className: "searchbox-step-button icon icon-close searchbox-close-button", onClick: this._handleIconClick, onKeyDown: this._handleIconClick, role: "button", tabIndex: 0 })));
+                React.createElement(IconButton, { size: "small", styleType: "borderless", onClick: this._onPrevClick, title: "Previous" },
+                    React.createElement(SvgChevronUp, null)),
+                React.createElement(IconButton, { size: "small", styleType: "borderless", onClick: this._onNextClick, title: "Next" },
+                    React.createElement(SvgChevronDown, null))),
+            React.createElement(IconButton, { size: "small", styleType: "borderless", onClick: this._handleIconClick, onKeyDown: this._handleIconClick },
+                React.createElement(SvgCloseSmall, null))));
     }
 }
 //# sourceMappingURL=SearchBox.js.map

package/lib/esm/components/search-bar/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBox.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,wBAAwB;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA2B9C;;;GAGG;AACH,MAAM,CAAN,IAAY,YASX;AATD,WAAY,YAAY;IACtB,mCAAmC;IACnC,iEAAa,CAAA;IACb,gDAAgD;IAChD,6EAAmB,CAAA;IACnB,gDAAgD;IAChD,yEAAiB,CAAA;IACjB,6GAA6G;IAC7G,qGAA+B,CAAA;AACjC,CAAC,EATW,YAAY,KAAZ,YAAY,QASvB;AAUD,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAGpC;IAIC,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAJP,kBAAa,GAA4B,IAAI,CAAC;QAC9C,eAAU,GAAW,CAAC,CAAC;QAmBvB,iBAAY,GAAG,CAAC,MAAY,EAAQ,EAAE;YAC5C,IAAI,UAAU,GAAG,EAAE,CAAC;YAEpB,uBAAuB;YACvB,IAAI,IAAI,CAAC,aAAa;gBAAE,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;YAE9D,IAAI,CAAC,QAAQ,CACX,CAAC,UAAU,EAAE,EAAE;gBACb,OAAO,EAAE,UAAU,EAAE,CAAC;YACxB,CAAC,EACD,GAAG,EAAE;gBACH,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;oBAChC,IAAI,CAAC,aAAa,EAAE,CAAC;oBACrB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;wBACvC,IAAI,CAAC,QAAQ,CAAC;4BACZ,OAAO,EAAE,YAAY,CAAC,aAAa;4BACnC,aAAa,EAAE,CAAC;yBACjB,CAAC,CAAC;wBACH,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;wBAChC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,CAAC,CAAC;oBACnD,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;iBAClC;qBAAM;oBACL,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC;oBACvD,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,CAAC,CAAC;iBAClD;YACH,CAAC,CACF,CAAC;QACJ,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAwC,EAAE,EAAE;YACpE,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,QAAQ;oBACX,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;wBAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;oBACvD,MAAM;gBACR,KAAK,OAAO;oBACV,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;wBAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC3D,MAAM;aACT;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAS,EAAE;YACpC,uBAAuB;YACvB,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,EAAE,CAAC;gBAC3C,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC9B,uBAAuB;gBACvB,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;oBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACtD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAC5B;YACD,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;gBAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACvD,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACrC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QAmCM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAC3D,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;aACxE;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;gBACrD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAC3D,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;aACxE;QACH,CAAC,CAAC;QAzHA,IAAI,CAAC,KAAK,GAAG;YACX,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;YACjC,OAAO,EAAE,YAAY,CAAC,aAAa;YACnC,aAAa,EAAE,CAAC;SACjB,CAAC;IACJ,CAAC;IAEM,KAAK;QACV,uBAAuB;QACvB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC5B;IACH,CAAC;IAgEM,KAAK,CAAC,kBAAkB,CAAC,SAAyB;QACvD,IAAI,SAAS,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YAClD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;SAC/B;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEM,oBAAoB;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,wBAAwB,CACpC,KAAqB,EACrB,KAAqB;QAErB,IACE,KAAK,CAAC,OAAO,KAAK,YAAY,CAAC,mBAAmB;YAClD,CAAC,KAAK,CAAC,mBAAmB,EAC1B;YACA,IAAI,KAAK,CAAC,UAAU;gBAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,iBAAiB,EAAE,CAAC;;gBACpE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,+BAA+B,EAAE,CAAC;SACvE;aAAM,IACL,KAAK,CAAC,OAAO,KAAK,YAAY,CAAC,aAAa;YAC5C,KAAK,CAAC,mBAAmB,EACzB;YACA,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,mBAAmB,EAAE,CAAC;SACtD;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAgBM,MAAM;QACX,MAAM,EACJ,SAAS,EACT,KAAK,EACL,WAAW,EACX,WAAW,GACZ,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjD,MAAM,eAAe,GAAG,UAAU,CAAC,uBAAuB,EAAE,SAAS,CAAC,CAAC;QACvE,MAAM,SAAS,GAAG,WAAW,GAAG,CAAC,CAAC;QAClC,MAAM,aAAa,GAAG,aAAa,GAAG,CAAC,CAAC;QACxC,MAAM,aAAa,GAAG,aAAa,GAAG,WAAW,CAAC;QAElD,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;YAC3C,+BACE,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;oBACV,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EACT,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAEtE;YACF,6BAAK,SAAS,EAAC,8BAA8B;gBAC1C,SAAS,IAAI,CACZ,8BAAM,SAAS,EAAC,0BAA0B,IAAE,GAAG,aAAa,IAAI,WAAW,EAAE,CAAQ,CACtF;gBACD,6BAAK,SAAS,EAAC,qBAAqB,GAAG;gBACvC,oBAAC,UAAU,IACT,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,iBAAiB,EACtB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,UAAU,GAChB;gBACF,oBAAC,UAAU,IACT,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,mBAAmB,EACxB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,MAAM,GACZ,CACE;YACN,8BACE,SAAS,EAAC,8DAA8D,EACxE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,GACX,CACE,CACP,CAAC;IACJ,CAAC;CACF","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/** @module SearchBox */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { IconButton } from \"../IconButton\";\nimport \"./SearchBox.scss\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nexport interface SearchBoxProps extends CommonProps {\n  /** value to set SearchBox */\n  searchText?: string;\n  /** placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** frequency to poll for changes in value */\n  valueChangedDelay?: number;\n  /** listens for <Enter> keypress */\n  onEnterPressed?: () => void;\n  /** listens for <Esc> keypress */\n  onEscPressed?: () => void;\n  /** listens for onClick event for Clear (x) icon */\n  onClear?: () => void;\n  /** Search or clear icon click */\n  onIconClick?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\n/**\n * Enumeration of possible component contexts\n * @internal\n */\nexport enum InputContext {\n  /** Component is ready to filter */\n  ReadyToFilter,\n  /** Component's parent is currently filtering */\n  FilteringInProgress,\n  /** Component's parent has finished filtering */\n  FilteringFinished,\n  /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */\n  FilteringFinishedWithNoStepping,\n}\n\ninterface SearchBoxState {\n  searchText?: string;\n  /** @internal */\n  context: InputContext;\n  /** Currently selected index */\n  selectedIndex: number;\n}\n\nexport class SearchBox extends React.PureComponent<\nSearchBoxProps,\nSearchBoxState\n> {\n  private _inputElement: HTMLInputElement | null = null;\n  private _timeoutId: number = 0;\n\n  constructor(props: SearchBoxProps) {\n    super(props);\n\n    this.state = {\n      searchText: this.props.searchText,\n      context: InputContext.ReadyToFilter,\n      selectedIndex: 0,\n    };\n  }\n\n  public focus() {\n    // istanbul ignore else\n    if (this._inputElement) {\n      this._inputElement.focus();\n    }\n  }\n\n  private _trackChange = (_event?: any): void => {\n    let searchText = \"\";\n\n    // istanbul ignore else\n    if (this._inputElement) searchText = this._inputElement.value;\n\n    this.setState(\n      (_prevState) => {\n        return { searchText };\n      },\n      () => {\n        if (this.props.valueChangedDelay) {\n          this._unsetTimeout();\n          this._timeoutId = window.setTimeout(() => {\n            this.setState({\n              context: InputContext.ReadyToFilter,\n              selectedIndex: 0,\n            });\n            this.props.onSelectedChanged(0);\n            this.props.onFilterStart(this.state.searchText!);\n          }, this.props.valueChangedDelay);\n        } else {\n          this.setState({ context: InputContext.ReadyToFilter });\n          this.props.onFilterStart(this.state.searchText!);\n        }\n      }\n    );\n  };\n\n  private _handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        // istanbul ignore else\n        if (this.props.onEscPressed) this.props.onEscPressed();\n        break;\n      case \"Enter\":\n        // istanbul ignore else\n        if (this.props.onEnterPressed) this.props.onEnterPressed();\n        break;\n    }\n  };\n\n  private _handleIconClick = (): void => {\n    // istanbul ignore else\n    if (this._inputElement) {\n      const clear = this.state.searchText !== \"\";\n      this._inputElement.value = \"\";\n      // istanbul ignore else\n      if (clear && this.props.onClear) this.props.onClear();\n      this._inputElement.focus();\n    }\n    this._trackChange();\n    if (this.props.onIconClick) this.props.onIconClick();\n  };\n\n  private _unsetTimeout = (): void => {\n    if (this._timeoutId) {\n      window.clearTimeout(this._timeoutId);\n      this._timeoutId = 0;\n    }\n  };\n\n  public async componentDidUpdate(prevProps: SearchBoxProps) {\n    if (prevProps.searchText !== this.props.searchText) {\n      const searchText = this.props.searchText;\n      this.setState({ searchText });\n    }\n\n    this.focus();\n  }\n\n  public componentWillUnmount() {\n    this._unsetTimeout();\n  }\n\n  /** @internal */\n  public static getDerivedStateFromProps(\n    props: SearchBoxProps,\n    state: SearchBoxState\n  ) {\n    if (\n      state.context === InputContext.FilteringInProgress &&\n      !props.filteringInProgress\n    ) {\n      if (state.searchText) return { context: InputContext.FilteringFinished };\n      else return { context: InputContext.FilteringFinishedWithNoStepping };\n    } else if (\n      state.context === InputContext.ReadyToFilter &&\n      props.filteringInProgress\n    ) {\n      return { context: InputContext.FilteringInProgress };\n    }\n    return null;\n  }\n\n  private _onPrevClick = () => {\n    if (this.state.selectedIndex > 1) {\n      this.props.onSelectedChanged(this.state.selectedIndex - 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex - 1 }));\n    }\n  };\n\n  private _onNextClick = () => {\n    if (this.state.selectedIndex < this.props.resultCount) {\n      this.props.onSelectedChanged(this.state.selectedIndex + 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex + 1 }));\n    }\n  };\n\n  public render() {\n    const {\n      className,\n      style,\n      resultCount,\n      placeholder,\n    } = this.props;\n    const { searchText, selectedIndex } = this.state;\n    const searchClassName = classnames(\"tree-widget-searchbox\", className);\n    const showCount = resultCount > 0;\n    const isPrevEnabled = selectedIndex > 1;\n    const isNextEnabled = selectedIndex < resultCount;\n\n    return (\n      <div className={searchClassName} style={style}>\n        <input\n          value={searchText}\n          ref={(el) => {\n            this._inputElement = el;\n          }}\n          onChange={this._trackChange}\n          onKeyDown={this._handleKeyDown}\n          onPaste={this._trackChange}\n          onCut={this._trackChange}\n          placeholder={\n            placeholder ? placeholder : TreeWidget.translate(\"searchbox.search\")\n          }\n        />\n        <div className=\"searchbox-stepping-container\">\n          {showCount && (\n            <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${resultCount}`}</span>\n          )}\n          <div className=\"searchbox-separator\" />\n          <IconButton\n            className=\"searchbox-step-button\"\n            icon=\"icon-chevron-up\"\n            disabled={!isPrevEnabled}\n            onClick={this._onPrevClick}\n            title=\"Previous\"\n          />\n          <IconButton\n            className=\"searchbox-step-button\"\n            icon=\"icon-chevron-down\"\n            disabled={!isNextEnabled}\n            onClick={this._onNextClick}\n            title=\"Next\"\n          />\n        </div>\n        <span\n          className=\"searchbox-step-button icon icon-close searchbox-close-button\"\n          onClick={this._handleIconClick}\n          onKeyDown={this._handleIconClick}\n          role=\"button\"\n          tabIndex={0}\n        />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBox.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/** @module SearchBox */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { SvgChevronDown, SvgChevronUp, SvgCloseSmall } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport \"./SearchBox.scss\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nexport interface SearchBoxProps extends CommonProps {\n  /** value to set SearchBox */\n  searchText?: string;\n  /** placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** frequency to poll for changes in value */\n  valueChangedDelay?: number;\n  /** listens for <Enter> keypress */\n  onEnterPressed?: () => void;\n  /** listens for <Esc> keypress */\n  onEscPressed?: () => void;\n  /** listens for onClick event for Clear (x) icon */\n  onClear?: () => void;\n  /** Search or clear icon click */\n  onIconClick?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\n/**\n * Enumeration of possible component contexts\n * @internal\n */\nexport enum InputContext {\n  /** Component is ready to filter */\n  ReadyToFilter,\n  /** Component's parent is currently filtering */\n  FilteringInProgress,\n  /** Component's parent has finished filtering */\n  FilteringFinished,\n  /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */\n  FilteringFinishedWithNoStepping,\n}\n\ninterface SearchBoxState {\n  searchText?: string;\n  /** @internal */\n  context: InputContext;\n  /** Currently selected index */\n  selectedIndex: number;\n}\n\nexport class SearchBox extends React.PureComponent<\nSearchBoxProps,\nSearchBoxState\n> {\n  private _inputElement: HTMLInputElement | null = null;\n  private _timeoutId: number = 0;\n\n  constructor(props: SearchBoxProps) {\n    super(props);\n\n    this.state = {\n      searchText: this.props.searchText,\n      context: InputContext.ReadyToFilter,\n      selectedIndex: 0,\n    };\n  }\n\n  public focus() {\n    // istanbul ignore else\n    if (this._inputElement) {\n      this._inputElement.focus();\n    }\n  }\n\n  private _trackChange = (_event?: any): void => {\n    let searchText = \"\";\n\n    // istanbul ignore else\n    if (this._inputElement) searchText = this._inputElement.value;\n\n    this.setState(\n      (_prevState) => {\n        return { searchText };\n      },\n      () => {\n        if (this.props.valueChangedDelay) {\n          this._unsetTimeout();\n          this._timeoutId = window.setTimeout(() => {\n            this.setState({\n              context: InputContext.ReadyToFilter,\n              selectedIndex: 0,\n            });\n            this.props.onSelectedChanged(0);\n            this.props.onFilterStart(this.state.searchText!);\n          }, this.props.valueChangedDelay);\n        } else {\n          this.setState({ context: InputContext.ReadyToFilter });\n          this.props.onFilterStart(this.state.searchText!);\n        }\n      }\n    );\n  };\n\n  private _handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        // istanbul ignore else\n        if (this.props.onEscPressed) this.props.onEscPressed();\n        break;\n      case \"Enter\":\n        // istanbul ignore else\n        if (this.props.onEnterPressed) this.props.onEnterPressed();\n        break;\n    }\n  };\n\n  private _handleIconClick = (): void => {\n    // istanbul ignore else\n    if (this._inputElement) {\n      const clear = this.state.searchText !== \"\";\n      this._inputElement.value = \"\";\n      // istanbul ignore else\n      if (clear && this.props.onClear) this.props.onClear();\n      this._inputElement.focus();\n    }\n    this._trackChange();\n    if (this.props.onIconClick) this.props.onIconClick();\n  };\n\n  private _unsetTimeout = (): void => {\n    if (this._timeoutId) {\n      window.clearTimeout(this._timeoutId);\n      this._timeoutId = 0;\n    }\n  };\n\n  public async componentDidUpdate(prevProps: SearchBoxProps) {\n    if (prevProps.searchText !== this.props.searchText) {\n      const searchText = this.props.searchText;\n      this.setState({ searchText });\n    }\n\n    this.focus();\n  }\n\n  public componentWillUnmount() {\n    this._unsetTimeout();\n  }\n\n  /** @internal */\n  public static getDerivedStateFromProps(\n    props: SearchBoxProps,\n    state: SearchBoxState\n  ) {\n    if (\n      state.context === InputContext.FilteringInProgress &&\n      !props.filteringInProgress\n    ) {\n      if (state.searchText) return { context: InputContext.FilteringFinished };\n      else return { context: InputContext.FilteringFinishedWithNoStepping };\n    } else if (\n      state.context === InputContext.ReadyToFilter &&\n      props.filteringInProgress\n    ) {\n      return { context: InputContext.FilteringInProgress };\n    }\n    return null;\n  }\n\n  private _onPrevClick = () => {\n    if (this.state.selectedIndex > 1) {\n      this.props.onSelectedChanged(this.state.selectedIndex - 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex - 1 }));\n    }\n  };\n\n  private _onNextClick = () => {\n    if (this.state.selectedIndex < this.props.resultCount) {\n      this.props.onSelectedChanged(this.state.selectedIndex + 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex + 1 }));\n    }\n  };\n\n  public render() {\n    const {\n      className,\n      style,\n      resultCount,\n      placeholder,\n    } = this.props;\n    const { searchText, selectedIndex } = this.state;\n    const searchClassName = classnames(\"tree-widget-searchbox\", className);\n    const showCount = resultCount > 0;\n\n    return (\n      <div className={searchClassName} style={style}>\n        <input\n          value={searchText}\n          ref={(el) => {\n            this._inputElement = el;\n          }}\n          onChange={this._trackChange}\n          onKeyDown={this._handleKeyDown}\n          onPaste={this._trackChange}\n          onCut={this._trackChange}\n          placeholder={\n            placeholder ? placeholder : TreeWidget.translate(\"searchbox.search\")\n          }\n        />\n        <div className=\"searchbox-stepping-container\">\n          {showCount && (\n            <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${resultCount}`}</span>\n          )}\n          <div className=\"searchbox-separator\" />\n          <IconButton\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={this._onPrevClick}\n            title=\"Previous\"\n          >\n            <SvgChevronUp />\n          </IconButton>\n          <IconButton\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={this._onNextClick}\n            title=\"Next\"\n          >\n            <SvgChevronDown />\n          </IconButton>\n        </div>\n        <IconButton\n          size=\"small\"\n          styleType=\"borderless\"\n          onClick={this._handleIconClick}\n          onKeyDown={this._handleIconClick}\n        >\n          <SvgCloseSmall />\n        </IconButton>\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/components/search-bar/SearchBox.scss

@@ -2,35 +2,34 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
 
 .tree-widget-searchbox {
-  @include uicore-font-family;
+  font-family: var(--iui-font-sans);
   display: flex;
   align-items: center;
   position: relative;
   //default values (height, width, font-size, color)
-  height: 34px;
+  height: calc(var(--iui-size-xl) + var(--iui-size-3xs));
   width: 12em;
-  font-size: $uicore-font-size;
-  color: $buic-text-color-reverse;
-  background: $buic-background-control;
-  border: 1px solid $buic-inputs-border;
+  font-size: calc(var(--iui-size-s) + var(--iui-size-3xs));
+  color: var(--iui-color-background-hsl) / var(--iui-opacity-2);
+  background: var(--iui-color-background);
+  border: 1px solid hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
 
   input {
-    padding: 0 $uicore-s;
+    padding: 0 var(--iui-size-xs);
     height: 100%;
     width: 100%;
     flex: 1;
-    background: $buic-background-control;
-    margin-right: $uicore-s;
-    color: $buic-text-color;
+    background: var(--iui-color-background);
+    margin-right: var(--iui-size-xs);
+    color: var(--iui-color-text);
     font-size: inherit;
     box-sizing: border-box;
     border: 0;
 
     &::placeholder {
-      color: $buic-foreground-disabled;
+      color: var(--iui-color-text-disabled);
     }
 
     &:focus-within,
@@ -50,13 +49,13 @@
   .searchbox-stepping-container {
     display: flex;
     align-items: center;
-    right: 32px;
+    right: var(--iui-size-xl);
     height: 100%;
 
     .searchbox-stepping-count {
-      font-size: 12px;
-      color: $buic-text-color;
-      margin-right: $uicore-xs;
+      font-size: var(--iui-size-s);
+      color: var(--iui-color-text);
+      margin-right: var(--iui-size-2xs);
       position: relative;
       word-wrap: none;
     }
@@ -64,28 +63,8 @@
     .searchbox-separator {
       height: 75%;
       width: 1px;
-      margin: 0 $uicore-s;
-      background: $buic-inputs-border;
+      margin: 0 var(--iui-size-xs);
+      background: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
     }
   }
-
-  .searchbox-step-button {
-    height: 100%;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    color: $buic-icon-color;
-    font-size: $uicore-font-size-small;
-    cursor: pointer;
-
-    &:hover {
-      color: $buic-accessory-primary;
-    }
-  }
-
-  .searchbox-close-button {
-    z-index: 1000;
-  }
 }