@itwin/tree-widget-react 0.1.1 → 0.1.2

package/lib/cjs/TreeWidget.d.ts

@@ -1,5 +1,5 @@
-import { Localization } from "@itwin/core-common";
-import { LocalizationOptions } from "@itwin/core-i18n";
+import type { Localization } from "@itwin/core-common";
+import type { LocalizationOptions } from "@itwin/core-i18n";
 /**
  * Entry point for static initialization required by various components used in the package.
  * @public

package/lib/cjs/TreeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,0DAA8D;AAC9D,wDAAiD;AAIjD;;;GAGG;AACH,MAAa,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,UAAU,CAAC,KAAK,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,yBAAS,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;IAC/B,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,wBAAO,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,OAAO,UAAU,CAAC,IAAI,CAAC,+BAA+B,CACpD,UAAU,CAAC,aAAa,EACxB,GAAG,EACH,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,6BAAY,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;AA9DD,gCA8DC","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 { UiError, getClassName } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Localization } from \"@itwin/core-common\";\nimport { 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    this._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  }\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    return TreeWidget.i18n.getLocalizedStringWithNamespace(\n      TreeWidget.i18nNamespace,\n      key,\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,0DAA8D;AAC9D,wDAAiD;AAIjD;;;GAGG;AACH,MAAa,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,UAAU,CAAC,KAAK,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,yBAAS,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;IAC/B,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,wBAAO,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,OAAO,UAAU,CAAC,IAAI,CAAC,+BAA+B,CACpD,UAAU,CAAC,aAAa,EACxB,GAAG,EACH,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,6BAAY,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;AA9DD,gCA8DC","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    this._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  }\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    return TreeWidget.i18n.getLocalizedStringWithNamespace(\n      TreeWidget.i18nNamespace,\n      key,\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/cjs/components/IconButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 import "./IconButton.scss";
 /** Properties for [[IconButton]] component */
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
@@ -7,6 +7,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     icon: string;
     /** A function to be run when the element is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** An optional text label to display to the left of the button  */
     label?: string;
 }
 /** Generic icon button component */

package/lib/cjs/components/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,4DAAoC;AAEpC,6BAA2B;AAc3B,oCAAoC;AACpC,SAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,UAAU,EACG;IAChB,OAAO,CACL;QACG,KAAK;YACJ,8BAAM,SAAS,EAAE,oBAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,IAC7D,KAAK,CACD;QAET,mCACM,UAAU,EACd,SAAS,EAAE,oBAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAC3D,OAAO,EAAE,OAAO;YAEhB,8BAAM,SAAS,EAAE,oBAAU,CAAC,MAAM,EAAE,IAAI,CAAC,GAAI,CACtC,CACR,CACJ,CAAC;AACJ,CAAC;AAvBD,gCAuBC","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 { CommonProps } from \"@itwin/core-react\";\nimport \"./IconButton.scss\";\n\n/** Properties for [[IconButton]] component */\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n  CommonProps {\n  /** Icon name */\n  icon: string;\n  /** A function to be run when the element is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  //** An optional text label to display to the left of the button  */\n  label?: string;\n}\n\n/** Generic icon button component */\nexport function IconButton({\n  className,\n  icon,\n  onClick,\n  label,\n  ...otherProps\n}: IconButtonProps) {\n  return (\n    <>\n      {label &&\n        <span className={classnames(\"tree-widget-icon-label\", className)}>\n          {label}\n        </span>\n      }\n      <button\n        {...otherProps}\n        className={classnames(\"tree-widget-icon-button\", className)}\n        onClick={onClick}\n      >\n        <span className={classnames(\"icon\", icon)} />\n      </button>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,4DAAoC;AAEpC,6BAA2B;AAc3B,oCAAoC;AACpC,SAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,UAAU,EACG;IAChB,OAAO,CACL;QACG,KAAK;YACJ,8BAAM,SAAS,EAAE,oBAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,IAC7D,KAAK,CACD;QAET,mCACM,UAAU,EACd,SAAS,EAAE,oBAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAC3D,OAAO,EAAE,OAAO;YAEhB,8BAAM,SAAS,EAAE,oBAAU,CAAC,MAAM,EAAE,IAAI,CAAC,GAAI,CACtC,CACR,CACJ,CAAC;AACJ,CAAC;AAvBD,gCAuBC","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 \"./IconButton.scss\";\n\n/** Properties for [[IconButton]] component */\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n  CommonProps {\n  /** Icon name */\n  icon: string;\n  /** A function to be run when the element is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** An optional text label to display to the left of the button  */\n  label?: string;\n}\n\n/** Generic icon button component */\nexport function IconButton({\n  className,\n  icon,\n  onClick,\n  label,\n  ...otherProps\n}: IconButtonProps) {\n  return (\n    <>\n      {label &&\n        <span className={classnames(\"tree-widget-icon-label\", className)}>\n          {label}\n        </span>\n      }\n      <button\n        {...otherProps}\n        className={classnames(\"tree-widget-icon-button\", className)}\n        onClick={onClick}\n      >\n        <span className={classnames(\"icon\", icon)} />\n      </button>\n    </>\n  );\n}\n"]}

package/lib/cjs/components/TreeFilteringState.d.ts

@@ -1,4 +1,4 @@
-import { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
 export interface SearchOptions {
     isFiltering: boolean;
     onFilterCancel: () => void;

package/lib/cjs/components/TreeFilteringState.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeFilteringState.js","sourceRoot":"","sources":["../../../src/components/TreeFilteringState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAwC;AAWjC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,gBAAQ,EAAU,CAAC;IACvE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,EAAU,CAAC;IACnE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,EAAiC,CAAC;IAE1F,MAAM,cAAc,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,qBAAqB,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QAC5D,eAAe,CAAC,SAAS,CAAC,CAAC;QAC3B,qBAAqB,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,uBAAuB,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAClE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,QAAuC,EAAE,OAAe,EAAE,EAAE;QACrG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAC9B,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,CAAC,YAAY,IAAI,kBAAkB,KAAK,SAAS,CAAC;IACvE,MAAM,aAAa,GAAkB;QACnC,WAAW;QACX,cAAc;QACd,aAAa;QACb,uBAAuB;QACvB,kBAAkB;KACnB,CAAC;IAEF,OAAO;QACL,aAAa;QACb,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,qBAAqB,yBA2ChC","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 React, { useState } from \"react\";\nimport { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\n\nexport interface SearchOptions {\n  isFiltering: boolean;\n  onFilterCancel: () => void;\n  onFilterStart: (newFilter: string) => void;\n  onResultSelectedChanged: (index: number) => void;\n  matchedResultCount: number | undefined;\n}\n\nexport const useTreeFilteringState = () => {\n  const [filterString, setFilterString] = useState(\"\");\n  const [matchedResultCount, setMatchedResultCount] = useState<number>();\n  const [activeMatchIndex, setActiveMatchIndex] = useState<number>();\n  const [filteredProvider, setFilteredProvider] = useState<IPresentationTreeDataProvider>();\n\n  const onFilterCancel = React.useCallback(() => {\n    setFilterString(\"\");\n    setMatchedResultCount(undefined);\n    setFilteredProvider(undefined);\n  }, []);\n\n  const onFilterStart = React.useCallback((newFilter: string) => {\n    setFilterString(newFilter);\n    setMatchedResultCount(undefined);\n    setFilteredProvider(undefined);\n  }, []);\n\n  const onResultSelectedChanged = React.useCallback((index: number) => {\n    setActiveMatchIndex(index);\n  }, []);\n\n  const onFilterApplied = React.useCallback((provider: IPresentationTreeDataProvider, matches: number) => {\n    setFilteredProvider(provider);\n    setMatchedResultCount(matches);\n  }, []);\n\n  const isFiltering = !!filterString && matchedResultCount === undefined;\n  const searchOptions: SearchOptions = {\n    isFiltering,\n    onFilterCancel,\n    onFilterStart,\n    onResultSelectedChanged,\n    matchedResultCount,\n  };\n\n  return {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  };\n};\n"]}
+{"version":3,"file":"TreeFilteringState.js","sourceRoot":"","sources":["../../../src/components/TreeFilteringState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAwC;AAWjC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,gBAAQ,EAAU,CAAC;IACvE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,EAAU,CAAC;IACnE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,EAAiC,CAAC;IAE1F,MAAM,cAAc,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,qBAAqB,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QAC5D,eAAe,CAAC,SAAS,CAAC,CAAC;QAC3B,qBAAqB,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,uBAAuB,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAClE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,QAAuC,EAAE,OAAe,EAAE,EAAE;QACrG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAC9B,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,CAAC,YAAY,IAAI,kBAAkB,KAAK,SAAS,CAAC;IACvE,MAAM,aAAa,GAAkB;QACnC,WAAW;QACX,cAAc;QACd,aAAa;QACb,uBAAuB;QACvB,kBAAkB;KACnB,CAAC;IAEF,OAAO;QACL,aAAa;QACb,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,qBAAqB,yBA2ChC","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 React, { useState } from \"react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\n\nexport interface SearchOptions {\n  isFiltering: boolean;\n  onFilterCancel: () => void;\n  onFilterStart: (newFilter: string) => void;\n  onResultSelectedChanged: (index: number) => void;\n  matchedResultCount: number | undefined;\n}\n\nexport const useTreeFilteringState = () => {\n  const [filterString, setFilterString] = useState(\"\");\n  const [matchedResultCount, setMatchedResultCount] = useState<number>();\n  const [activeMatchIndex, setActiveMatchIndex] = useState<number>();\n  const [filteredProvider, setFilteredProvider] = useState<IPresentationTreeDataProvider>();\n\n  const onFilterCancel = React.useCallback(() => {\n    setFilterString(\"\");\n    setMatchedResultCount(undefined);\n    setFilteredProvider(undefined);\n  }, []);\n\n  const onFilterStart = React.useCallback((newFilter: string) => {\n    setFilterString(newFilter);\n    setMatchedResultCount(undefined);\n    setFilteredProvider(undefined);\n  }, []);\n\n  const onResultSelectedChanged = React.useCallback((index: number) => {\n    setActiveMatchIndex(index);\n  }, []);\n\n  const onFilterApplied = React.useCallback((provider: IPresentationTreeDataProvider, matches: number) => {\n    setFilteredProvider(provider);\n    setMatchedResultCount(matches);\n  }, []);\n\n  const isFiltering = !!filterString && matchedResultCount === undefined;\n  const searchOptions: SearchOptions = {\n    isFiltering,\n    onFilterCancel,\n    onFilterStart,\n    onResultSelectedChanged,\n    matchedResultCount,\n  };\n\n  return {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  };\n};\n"]}

package/lib/cjs/components/TreeWidgetComponent.d.ts

@@ -1,5 +1,5 @@
 import "./TreeWidgetComponent.scss";
-import { SelectableContentDefinition } from "@itwin/components-react";
+import type { SelectableContentDefinition } from "@itwin/components-react";
 interface TreeWidgetComponentProps {
     trees?: SelectableContentDefinition[];
 }

package/lib/cjs/components/TreeWidgetComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetComponent.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,sCAAoC;AAEpC,8DAGiC;AAMjC,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,KAAK,GAAkC,EAAE,CAAC;IAEhD,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3C,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE;YAC/B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnB;KACF;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,oBAAC,oCAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GACrC,CACE,CACP,CAAC;AACJ,CAAC;AAjBD,kDAiBC","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 \"./TreeWidgetComponent.scss\";\nimport { useState } from \"react\";\nimport {\n  SelectableContent,\n  SelectableContentDefinition,\n} from \"@itwin/components-react\";\n\ninterface TreeWidgetComponentProps {\n  trees?: SelectableContentDefinition[];\n}\n\nexport function TreeWidgetComponent(props: TreeWidgetComponentProps) {\n  const trees: SelectableContentDefinition[] = [];\n\n  if (props.trees && props.trees.length !== 0) {\n    for (const entry of props.trees) {\n      trees.push(entry);\n    }\n  }\n\n  return (\n    <div className=\"tree-widget-visibility-widget\">\n      <SelectableContent\n        children={trees}\n        defaultSelectedContentId={trees[0].id}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"TreeWidgetComponent.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,sCAAoC;AAEpC,8DAA4D;AAM5D,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,KAAK,GAAkC,EAAE,CAAC;IAEhD,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3C,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE;YAC/B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnB;KACF;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,oBAAC,oCAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GACrC,CACE,CACP,CAAC;AACJ,CAAC;AAjBD,kDAiBC","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 \"./TreeWidgetComponent.scss\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { SelectableContent } from \"@itwin/components-react\";\n\ninterface TreeWidgetComponentProps {\n  trees?: SelectableContentDefinition[];\n}\n\nexport function TreeWidgetComponent(props: TreeWidgetComponentProps) {\n  const trees: SelectableContentDefinition[] = [];\n\n  if (props.trees && props.trees.length !== 0) {\n    for (const entry of props.trees) {\n      trees.push(entry);\n    }\n  }\n\n  return (\n    <div className=\"tree-widget-visibility-widget\">\n      <SelectableContent\n        children={trees} // eslint-disable-line react/no-children-prop\n        defaultSelectedContentId={trees[0].id}\n      />\n    </div>\n  );\n}\n"]}

package/lib/cjs/components/TreeWidgetControl.d.ts

@@ -1,7 +1,8 @@
-import { WidgetControl, ConfigurableCreateInfo } from "@itwin/appui-react";
+import type { ConfigurableCreateInfo } from "@itwin/appui-react";
+import { WidgetControl } from "@itwin/appui-react";
 import React from "react";
-import { IModelConnection, Viewport } from "@itwin/core-frontend";
-import { SelectableContentDefinition } from "@itwin/components-react";
+import type { IModelConnection, Viewport } from "@itwin/core-frontend";
+import type { SelectableContentDefinition } from "@itwin/components-react";
 export interface TreeWidgetControlOptions {
     iModelConnection: IModelConnection;
     activeView?: Viewport;

package/lib/cjs/components/TreeWidgetControl.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeWidgetControl = void 0;
 const appui_react_1 = require("@itwin/appui-react");
 const react_1 = __importDefault(require("react"));
-const trees_1 = require("./trees");
+const CategoriesTree_1 = require("./trees/CategoriesTree");
+const ModelsTree_1 = require("./trees/ModelsTree");
+const SpatialTree_1 = require("./trees/SpatialTree");
 const TreeWidgetComponent_1 = require("./TreeWidgetComponent");
 const TreeWidget_1 = require("../TreeWidget");
 class TreeWidgetControl extends appui_react_1.WidgetControl {
@@ -27,9 +29,9 @@ class TreeWidgetControl extends appui_react_1.WidgetControl {
         const modelsTreeReplacement = (_d = options.treeReplacements) === null || _d === void 0 ? void 0 : _d.modelsTree;
         const categoriesTreeReplacement = (_e = options.treeReplacements) === null || _e === void 0 ? void 0 : _e.categoriesTree;
         const spatialTreeReplacement = (_f = options.treeReplacements) === null || _f === void 0 ? void 0 : _f.spatialTree;
-        const modelsTreeComponent = (react_1.default.createElement(trees_1.ModelsTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, enableElementsClassGrouping: enableElementsClassGrouping, ...modelsTreeProps }));
-        const categoriesTreeComponent = (react_1.default.createElement(trees_1.CategoriesTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, ...categoriesTreeProps }));
-        const spatialContainmentComponent = (react_1.default.createElement(trees_1.SpatialTreeComponent, { iModel: imodel, enableElementsClassGrouping: enableElementsClassGrouping
+        const modelsTreeComponent = (react_1.default.createElement(ModelsTree_1.ModelsTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, enableElementsClassGrouping: enableElementsClassGrouping, ...modelsTreeProps }));
+        const categoriesTreeComponent = (react_1.default.createElement(CategoriesTree_1.CategoriesTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, ...categoriesTreeProps }));
+        const spatialContainmentComponent = (react_1.default.createElement(SpatialTree_1.SpatialTreeComponent, { iModel: imodel, enableElementsClassGrouping: enableElementsClassGrouping
                 ? appui_react_1.ClassGroupingOption.Yes
                 : appui_react_1.ClassGroupingOption.No, ...spatialTreeProps }));
         const trees = [

package/lib/cjs/components/TreeWidgetControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetControl.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetControl.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;AAE/F,oDAI4B;AAC5B,kDAA0B;AAC1B,mCAIiB;AAEjB,+DAA4D;AAE5D,8CAA2C;AAoB3C,MAAa,iBAAkB,SAAQ,2BAAa;IAClD,YAAY,IAA4B,EAAE,OAAiC;;QACzE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAErB,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QACzD,MAAM,eAAe,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,UAAU,CAAC;QAC5D,MAAM,mBAAmB,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,cAAc,CAAC;QACpE,MAAM,gBAAgB,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,WAAW,CAAC;QAC9D,MAAM,2BAA2B,GAAG,OAAO,CAAC,2BAA2B,CAAC;QACxE,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QAC1C,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC;QAChD,MAAM,qBAAqB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,UAAU,CAAC;QACnE,MAAM,yBAAyB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,cAAc,CAAC;QAC3E,MAAM,sBAAsB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,WAAW,CAAC;QAErE,MAAM,mBAAmB,GAAG,CAC1B,8BAAC,2BAAmB,IAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,2BAA2B,EAAE,2BAA2B,KACpD,eAAe,GACnB,CACH,CAAC;QAEF,MAAM,uBAAuB,GAAG,CAC9B,8BAAC,+BAAuB,IACtB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,KAClB,mBAAmB,GACvB,CACH,CAAC;QAEF,MAAM,2BAA2B,GAAG,CAClC,8BAAC,4BAAoB,IACnB,MAAM,EAAE,MAAM,EACd,2BAA2B,EACzB,2BAA2B;gBACzB,CAAC,CAAC,iCAAmB,CAAC,GAAG;gBACzB,CAAC,CAAC,iCAAmB,CAAC,EAAE,KAExB,gBAAgB,GACpB,CACH,CAAC;QAEF,MAAM,KAAK,GAAkC;YAC3C;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,WAAW,CAAC;gBACxC,EAAE,EAAE,YAAY;gBAChB,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB;aAC9B;YACD;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,YAAY,CAAC;gBACzC,EAAE,EAAE,iBAAiB;gBACrB,MAAM,EAAE,yBAAyB;oBAC/B,CAAC,CAAC,yBAAyB;oBAC3B,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAuB;aAClC;YACD;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,aAAa,CAAC;gBAC1C,EAAE,EAAE,0BAA0B;gBAC9B,MAAM,EAAE,sBAAsB;oBAC5B,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,GAAG,EAAE,CAAC,2BAA2B;aACtC;SACF,CAAC;QAEF,IAAI,eAAe;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC;QAEpD,IAAI,CAAC,SAAS,GAAG,8BAAC,yCAAmB,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IACzD,CAAC;CACF;AA1ED,8CA0EC","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 {\n  WidgetControl,\n  ConfigurableCreateInfo,\n  ClassGroupingOption,\n} from \"@itwin/appui-react\";\nimport React from \"react\";\nimport {\n  ModelsTreeComponent,\n  CategoriesTreeComponent,\n  SpatialTreeComponent,\n} from \"./trees\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nexport interface TreeWidgetControlOptions {\n  iModelConnection: IModelConnection;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n  allViewports?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  additionalProps?: {\n    modelsTree?: {};\n    categoriesTree?: {};\n    spatialTree?: {};\n  };\n  treeReplacements?: {\n    modelsTree?: () => React.ReactNode;\n    categoriesTree?: () => React.ReactNode;\n    spatialTree?: () => React.ReactNode;\n  };\n}\n\nexport class TreeWidgetControl extends WidgetControl {\n  constructor(info: ConfigurableCreateInfo, options: TreeWidgetControlOptions) {\n    super(info, options);\n\n    const { iModelConnection: imodel, activeView } = options;\n    const modelsTreeProps = options.additionalProps?.modelsTree;\n    const categoriesTreeProps = options.additionalProps?.categoriesTree;\n    const spatialTreeProps = options.additionalProps?.spatialTree;\n    const enableElementsClassGrouping = options.enableElementsClassGrouping;\n    const allViewPorts = options.allViewports;\n    const additionalTrees = options.additionalTrees;\n    const modelsTreeReplacement = options.treeReplacements?.modelsTree;\n    const categoriesTreeReplacement = options.treeReplacements?.categoriesTree;\n    const spatialTreeReplacement = options.treeReplacements?.spatialTree;\n\n    const modelsTreeComponent = (\n      <ModelsTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        enableElementsClassGrouping={enableElementsClassGrouping}\n        {...modelsTreeProps}\n      />\n    );\n\n    const categoriesTreeComponent = (\n      <CategoriesTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        {...categoriesTreeProps}\n      />\n    );\n\n    const spatialContainmentComponent = (\n      <SpatialTreeComponent\n        iModel={imodel}\n        enableElementsClassGrouping={\n          enableElementsClassGrouping\n            ? ClassGroupingOption.Yes\n            : ClassGroupingOption.No\n        }\n        {...spatialTreeProps}\n      />\n    );\n\n    const trees: SelectableContentDefinition[] = [\n      {\n        label: TreeWidget.translate(\"modeltree\"),\n        id: \"model-tree\",\n        render: modelsTreeReplacement\n          ? modelsTreeReplacement\n          : () => modelsTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"categories\"),\n        id: \"categories-tree\",\n        render: categoriesTreeReplacement\n          ? categoriesTreeReplacement\n          : () => categoriesTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"containment\"),\n        id: \"spatial-containment-tree\",\n        render: spatialTreeReplacement\n          ? spatialTreeReplacement\n          : () => spatialContainmentComponent,\n      },\n    ];\n\n    if (additionalTrees) trees.push(...additionalTrees);\n\n    this.reactNode = <TreeWidgetComponent trees={trees} />;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidgetControl.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetControl.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;AAG/F,oDAG4B;AAC5B,kDAA0B;AAC1B,2DAAiE;AACjE,mDAAyD;AACzD,qDAA2D;AAE3D,+DAA4D;AAE5D,8CAA2C;AAoB3C,MAAa,iBAAkB,SAAQ,2BAAa;IAClD,YAAY,IAA4B,EAAE,OAAiC;;QACzE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAErB,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QACzD,MAAM,eAAe,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,UAAU,CAAC;QAC5D,MAAM,mBAAmB,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,cAAc,CAAC;QACpE,MAAM,gBAAgB,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,WAAW,CAAC;QAC9D,MAAM,2BAA2B,GAAG,OAAO,CAAC,2BAA2B,CAAC;QACxE,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QAC1C,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC;QAChD,MAAM,qBAAqB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,UAAU,CAAC;QACnE,MAAM,yBAAyB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,cAAc,CAAC;QAC3E,MAAM,sBAAsB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,WAAW,CAAC;QAErE,MAAM,mBAAmB,GAAG,CAC1B,8BAAC,gCAAmB,IAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,2BAA2B,EAAE,2BAA2B,KACpD,eAAe,GACnB,CACH,CAAC;QAEF,MAAM,uBAAuB,GAAG,CAC9B,8BAAC,wCAAuB,IACtB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,KAClB,mBAAmB,GACvB,CACH,CAAC;QAEF,MAAM,2BAA2B,GAAG,CAClC,8BAAC,kCAAoB,IACnB,MAAM,EAAE,MAAM,EACd,2BAA2B,EACzB,2BAA2B;gBACzB,CAAC,CAAC,iCAAmB,CAAC,GAAG;gBACzB,CAAC,CAAC,iCAAmB,CAAC,EAAE,KAExB,gBAAgB,GACpB,CACH,CAAC;QAEF,MAAM,KAAK,GAAkC;YAC3C;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,WAAW,CAAC;gBACxC,EAAE,EAAE,YAAY;gBAChB,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB;aAC9B;YACD;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,YAAY,CAAC;gBACzC,EAAE,EAAE,iBAAiB;gBACrB,MAAM,EAAE,yBAAyB;oBAC/B,CAAC,CAAC,yBAAyB;oBAC3B,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAuB;aAClC;YACD;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,aAAa,CAAC;gBAC1C,EAAE,EAAE,0BAA0B;gBAC9B,MAAM,EAAE,sBAAsB;oBAC5B,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,GAAG,EAAE,CAAC,2BAA2B;aACtC;SACF,CAAC;QAEF,IAAI,eAAe;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC;QAEpD,IAAI,CAAC,SAAS,GAAG,8BAAC,yCAAmB,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IACzD,CAAC;CACF;AA1ED,8CA0EC","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 { ConfigurableCreateInfo } from \"@itwin/appui-react\";\nimport {\n  ClassGroupingOption,\n  WidgetControl,\n} from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { CategoriesTreeComponent } from \"./trees/CategoriesTree\";\nimport { ModelsTreeComponent } from \"./trees/ModelsTree\";\nimport { SpatialTreeComponent } from \"./trees/SpatialTree\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nexport interface TreeWidgetControlOptions {\n  iModelConnection: IModelConnection;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n  allViewports?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  additionalProps?: {\n    modelsTree?: {};\n    categoriesTree?: {};\n    spatialTree?: {};\n  };\n  treeReplacements?: {\n    modelsTree?: () => React.ReactNode;\n    categoriesTree?: () => React.ReactNode;\n    spatialTree?: () => React.ReactNode;\n  };\n}\n\nexport class TreeWidgetControl extends WidgetControl {\n  constructor(info: ConfigurableCreateInfo, options: TreeWidgetControlOptions) {\n    super(info, options);\n\n    const { iModelConnection: imodel, activeView } = options;\n    const modelsTreeProps = options.additionalProps?.modelsTree;\n    const categoriesTreeProps = options.additionalProps?.categoriesTree;\n    const spatialTreeProps = options.additionalProps?.spatialTree;\n    const enableElementsClassGrouping = options.enableElementsClassGrouping;\n    const allViewPorts = options.allViewports;\n    const additionalTrees = options.additionalTrees;\n    const modelsTreeReplacement = options.treeReplacements?.modelsTree;\n    const categoriesTreeReplacement = options.treeReplacements?.categoriesTree;\n    const spatialTreeReplacement = options.treeReplacements?.spatialTree;\n\n    const modelsTreeComponent = (\n      <ModelsTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        enableElementsClassGrouping={enableElementsClassGrouping}\n        {...modelsTreeProps}\n      />\n    );\n\n    const categoriesTreeComponent = (\n      <CategoriesTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        {...categoriesTreeProps}\n      />\n    );\n\n    const spatialContainmentComponent = (\n      <SpatialTreeComponent\n        iModel={imodel}\n        enableElementsClassGrouping={\n          enableElementsClassGrouping\n            ? ClassGroupingOption.Yes\n            : ClassGroupingOption.No\n        }\n        {...spatialTreeProps}\n      />\n    );\n\n    const trees: SelectableContentDefinition[] = [\n      {\n        label: TreeWidget.translate(\"modeltree\"),\n        id: \"model-tree\",\n        render: modelsTreeReplacement\n          ? modelsTreeReplacement\n          : () => modelsTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"categories\"),\n        id: \"categories-tree\",\n        render: categoriesTreeReplacement\n          ? categoriesTreeReplacement\n          : () => categoriesTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"containment\"),\n        id: \"spatial-containment-tree\",\n        render: spatialTreeReplacement\n          ? spatialTreeReplacement\n          : () => spatialContainmentComponent,\n      },\n    ];\n\n    if (additionalTrees) trees.push(...additionalTrees);\n\n    this.reactNode = <TreeWidgetComponent trees={trees} />;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
-import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider } from "@itwin/appui-abstract";
-import { TreeWidgetControlOptions } from "./TreeWidgetControl";
+import type { AbstractWidgetProps, StagePanelSection, UiItemsProvider } from "@itwin/appui-abstract";
+import { StagePanelLocation } from "@itwin/appui-abstract";
+import type { TreeWidgetControlOptions } from "./TreeWidgetControl";
 export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {
     readonly id = "TreeWidgetUiitemsProvider";
     private _imodel?;

package/lib/cjs/components/TreeWidgetUiItemsProvider.js

@@ -4,15 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeWidgetUiItemsProvider = void 0;
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const appui_react_1 = require("@itwin/appui-react");
 const react_1 = __importDefault(require("react"));
 const TreeWidgetComponent_1 = require("./TreeWidgetComponent");
-const trees_1 = require("./trees");
+const CategoriesTree_1 = require("./trees/CategoriesTree");
+const ModelsTree_1 = require("./trees/ModelsTree");
+const SpatialTree_1 = require("./trees/SpatialTree");
 const TreeWidget_1 = require("../TreeWidget");
 class TreeWidgetUiItemsProvider {
     constructor(props) {
@@ -37,9 +35,9 @@ class TreeWidgetUiItemsProvider {
         if (stageUsage === appui_abstract_1.StageUsage.General &&
             location === appui_abstract_1.StagePanelLocation.Right &&
             imodel !== undefined) {
-            const modelsTreeComponent = (react_1.default.createElement(trees_1.ModelsTreeComponent, { iModel: (_a = this._imodel) !== null && _a !== void 0 ? _a : imodel, allViewports: this._allViewports, activeView: this._activeView, enableElementsClassGrouping: this._enableElementsClassGrouping, ...this._modelsTreeProps }));
-            const categoriesTreeComponent = (react_1.default.createElement(trees_1.CategoriesTreeComponent, { iModel: (_b = this._imodel) !== null && _b !== void 0 ? _b : imodel, allViewports: this._allViewports, activeView: this._activeView, ...this._categoriesTreeProps }));
-            const spatialContainmentComponent = (react_1.default.createElement(trees_1.SpatialTreeComponent, { iModel: (_c = this._imodel) !== null && _c !== void 0 ? _c : imodel, enableElementsClassGrouping: this._enableElementsClassGrouping
+            const modelsTreeComponent = (react_1.default.createElement(ModelsTree_1.ModelsTreeComponent, { iModel: (_a = this._imodel) !== null && _a !== void 0 ? _a : imodel, allViewports: this._allViewports, activeView: this._activeView, enableElementsClassGrouping: this._enableElementsClassGrouping, ...this._modelsTreeProps }));
+            const categoriesTreeComponent = (react_1.default.createElement(CategoriesTree_1.CategoriesTreeComponent, { iModel: (_b = this._imodel) !== null && _b !== void 0 ? _b : imodel, allViewports: this._allViewports, activeView: this._activeView, ...this._categoriesTreeProps }));
+            const spatialContainmentComponent = (react_1.default.createElement(SpatialTree_1.SpatialTreeComponent, { iModel: (_c = this._imodel) !== null && _c !== void 0 ? _c : imodel, enableElementsClassGrouping: this._enableElementsClassGrouping
                     ? appui_react_1.ClassGroupingOption.Yes
                     : appui_react_1.ClassGroupingOption.No, ...this._spatialTreeProps }));
             const trees = [
@@ -71,6 +69,7 @@ class TreeWidgetUiItemsProvider {
             widgets.push({
                 id: "tree",
                 label: TreeWidget_1.TreeWidget.translate("treeview"),
+                // eslint-disable-next-line react/display-name
                 getWidgetContent: () => react_1.default.createElement(TreeWidgetComponent_1.TreeWidgetComponent, { trees: trees }),
             });
         }

package/lib/cjs/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*--------------------------------------------------------------------------------------------*/\nimport {\n  AbstractWidgetProps,\n  StagePanelLocation,\n  StagePanelSection,\n  StageUsage,\n  UiItemsProvider,\n} from \"@itwin/appui-abstract\";\nimport { ClassGroupingOption, UiFramework } from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport {\n  ModelsTreeComponent,\n  CategoriesTreeComponent,\n  SpatialTreeComponent,\n} from \"./trees\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { TreeWidgetControlOptions } from \"./TreeWidgetControl\";\n\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiitemsProvider\";\n\n  private _imodel?: IModelConnection;\n  private _activeView?: Viewport;\n  private _enableElementsClassGrouping?: boolean;\n  private _allViewports?: boolean;\n  private _additionalTrees?: SelectableContentDefinition[];\n  private _modelsTreeProps?: {};\n  private _categoriesTreeProps?: {};\n  private _spatialTreeProps?: {};\n  private _modelsTreeReplacement?: () => React.ReactNode;\n  private _categoriesTreeReplacement?: () => React.ReactNode;\n  private _spatialTreeReplacement?: () => React.ReactNode;\n\n  constructor(props?: Partial<TreeWidgetControlOptions>) {\n    this._imodel = props?.iModelConnection;\n    this._activeView = props?.activeView;\n    this._enableElementsClassGrouping = props?.enableElementsClassGrouping;\n    this._allViewports = props?.allViewports;\n    this._additionalTrees = props?.additionalTrees;\n    this._modelsTreeProps = props?.additionalProps?.modelsTree;\n    this._categoriesTreeProps = props?.additionalProps?.categoriesTree;\n    this._spatialTreeProps = props?.additionalProps?.spatialTree;\n    this._modelsTreeReplacement = props?.treeReplacements?.modelsTree;\n    this._categoriesTreeReplacement = props?.treeReplacements?.categoriesTree;\n    this._spatialTreeReplacement = props?.treeReplacements?.spatialTree;\n  }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    _section: StagePanelSection | undefined\n  ): ReadonlyArray<AbstractWidgetProps> {\n    const widgets: AbstractWidgetProps[] = [];\n    const imodel = UiFramework.getIModelConnection();\n    if (\n      stageUsage === StageUsage.General &&\n      location === StagePanelLocation.Right &&\n      imodel !== undefined\n    ) {\n      const modelsTreeComponent = (\n        <ModelsTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          enableElementsClassGrouping={this._enableElementsClassGrouping}\n          {...this._modelsTreeProps}\n        />\n      );\n\n      const categoriesTreeComponent = (\n        <CategoriesTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          {...this._categoriesTreeProps}\n        />\n      );\n\n      const spatialContainmentComponent = (\n        <SpatialTreeComponent\n          iModel={this._imodel ?? imodel}\n          enableElementsClassGrouping={\n            this._enableElementsClassGrouping\n              ? ClassGroupingOption.Yes\n              : ClassGroupingOption.No\n          }\n          {...this._spatialTreeProps}\n        />\n      );\n\n      const trees: SelectableContentDefinition[] = [\n        {\n          label: TreeWidget.translate(\"modeltree\"),\n          id: \"model-tree\",\n          render: this._modelsTreeReplacement\n            ? this._modelsTreeReplacement\n            : () => modelsTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"categories\"),\n          id: \"categories-tree\",\n          render: this._categoriesTreeReplacement\n            ? this._categoriesTreeReplacement\n            : () => categoriesTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"containment\"),\n          id: \"spatial-containment-tree\",\n          render: this._spatialTreeReplacement\n            ? this._spatialTreeReplacement\n            : () => spatialContainmentComponent,\n        },\n      ];\n\n      if (this._additionalTrees) {\n        trees.push(...this._additionalTrees);\n      }\n\n      widgets.push({\n        id: \"tree\",\n        label: TreeWidget.translate(\"treeview\"),\n        getWidgetContent: () => <TreeWidgetComponent trees={trees} />,\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*--------------------------------------------------------------------------------------------*/\nimport type {\n  AbstractWidgetProps,\n  StagePanelSection,\n  UiItemsProvider,\n} from \"@itwin/appui-abstract\";\nimport {\n  StagePanelLocation,\n  StageUsage,\n} from \"@itwin/appui-abstract\";\nimport { ClassGroupingOption, UiFramework } from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport { CategoriesTreeComponent } from \"./trees/CategoriesTree\";\nimport { ModelsTreeComponent } from \"./trees/ModelsTree\";\nimport { SpatialTreeComponent } from \"./trees/SpatialTree\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport type { TreeWidgetControlOptions } from \"./TreeWidgetControl\";\n\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiitemsProvider\";\n\n  private _imodel?: IModelConnection;\n  private _activeView?: Viewport;\n  private _enableElementsClassGrouping?: boolean;\n  private _allViewports?: boolean;\n  private _additionalTrees?: SelectableContentDefinition[];\n  private _modelsTreeProps?: {};\n  private _categoriesTreeProps?: {};\n  private _spatialTreeProps?: {};\n  private _modelsTreeReplacement?: () => React.ReactNode;\n  private _categoriesTreeReplacement?: () => React.ReactNode;\n  private _spatialTreeReplacement?: () => React.ReactNode;\n\n  constructor(props?: Partial<TreeWidgetControlOptions>) {\n    this._imodel = props?.iModelConnection;\n    this._activeView = props?.activeView;\n    this._enableElementsClassGrouping = props?.enableElementsClassGrouping;\n    this._allViewports = props?.allViewports;\n    this._additionalTrees = props?.additionalTrees;\n    this._modelsTreeProps = props?.additionalProps?.modelsTree;\n    this._categoriesTreeProps = props?.additionalProps?.categoriesTree;\n    this._spatialTreeProps = props?.additionalProps?.spatialTree;\n    this._modelsTreeReplacement = props?.treeReplacements?.modelsTree;\n    this._categoriesTreeReplacement = props?.treeReplacements?.categoriesTree;\n    this._spatialTreeReplacement = props?.treeReplacements?.spatialTree;\n  }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    _section: StagePanelSection | undefined\n  ): ReadonlyArray<AbstractWidgetProps> {\n    const widgets: AbstractWidgetProps[] = [];\n    const imodel = UiFramework.getIModelConnection();\n    if (\n      stageUsage === StageUsage.General &&\n      location === StagePanelLocation.Right &&\n      imodel !== undefined\n    ) {\n      const modelsTreeComponent = (\n        <ModelsTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          enableElementsClassGrouping={this._enableElementsClassGrouping}\n          {...this._modelsTreeProps}\n        />\n      );\n\n      const categoriesTreeComponent = (\n        <CategoriesTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          {...this._categoriesTreeProps}\n        />\n      );\n\n      const spatialContainmentComponent = (\n        <SpatialTreeComponent\n          iModel={this._imodel ?? imodel}\n          enableElementsClassGrouping={\n            this._enableElementsClassGrouping\n              ? ClassGroupingOption.Yes\n              : ClassGroupingOption.No\n          }\n          {...this._spatialTreeProps}\n        />\n      );\n\n      const trees: SelectableContentDefinition[] = [\n        {\n          label: TreeWidget.translate(\"modeltree\"),\n          id: \"model-tree\",\n          render: this._modelsTreeReplacement\n            ? this._modelsTreeReplacement\n            : () => modelsTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"categories\"),\n          id: \"categories-tree\",\n          render: this._categoriesTreeReplacement\n            ? this._categoriesTreeReplacement\n            : () => categoriesTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"containment\"),\n          id: \"spatial-containment-tree\",\n          render: this._spatialTreeReplacement\n            ? this._spatialTreeReplacement\n            : () => spatialContainmentComponent,\n        },\n      ];\n\n      if (this._additionalTrees) {\n        trees.push(...this._additionalTrees);\n      }\n\n      widgets.push({\n        id: \"tree\",\n        label: TreeWidget.translate(\"treeview\"),\n        // eslint-disable-next-line react/display-name\n        getWidgetContent: () => <TreeWidgetComponent trees={trees} />,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}

package/lib/cjs/components/header/TreeHeader.d.ts

@@ -1,4 +1,4 @@
-import { SearchOptions } from "../TreeFilteringState";
+import type { SearchOptions } from "../TreeFilteringState";
 import "./TreeHeader.scss";
 export interface TreeHeaderComponentProps {
     showAll?: () => void;

package/lib/cjs/components/header/TreeHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/header/TreeHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,8CAA2C;AAC3C,uDAAoD;AAEpD,iDAA8C;AAC9C,6BAA2B;AAa3B,SAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,GACa;;IACzB,OAAO,CACL,oBAAC,qBAAS,IACR,KAAK,EAAC,EAAE,EACR,SAAS,EAAC,oCAAoC,EAC9C,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EAC3C,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,EACjD,mBAAmB,EAAE,aAAa,CAAC,WAAW,EAC9C,cAAc,EAAE,aAAa,CAAC,cAAc,EAC5C,aAAa,EAAE,aAAa,CAAC,cAAc,EAC3C,aAAa,EAAE,aAAa,CAAC,aAAa,EAC1C,iBAAiB,EAAE,aAAa,CAAC,uBAAuB,EACxD,WAAW,EAAE,MAAA,aAAa,CAAC,kBAAkB,mCAAI,CAAC;QAElD,6BAAK,SAAS,EAAC,yCAAyC;YACrD,OAAO,IAAI,CACV,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,OAAO,IAAI,CACV,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,MAAM,IAAI,CACT,oBAAC,uBAAU,IACT,GAAG,EAAC,gBAAgB,EACpB,SAAS,EAAE,sCAAsC,EACjD,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EACrC,IAAI,EAAC,wBAAwB,EAC7B,OAAO,EAAE,MAAM,GACf,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH,CACG,CACI,CACb,CAAC;AACJ,CAAC;AA3ED,kDA2EC","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 { IconButton } from \"../IconButton\";\nimport { SearchBar } from \"../search-bar/SearchBar\";\nimport { SearchOptions } from \"../TreeFilteringState\";\nimport { TreeWidget } from \"../../TreeWidget\";\nimport \"./TreeHeader.scss\";\n\nexport interface TreeHeaderComponentProps {\n  showAll?: () => void;\n  hideAll?: () => void;\n  invert?: () => void;\n  toggle2D?: () => void;\n  toggle2DIcon?: string;\n  toggle3D?: () => void;\n  toggle3DIcon?: string;\n  searchOptions: SearchOptions;\n}\n\nexport function TreeHeaderComponent({\n  searchOptions,\n  showAll,\n  hideAll,\n  invert,\n  toggle2D,\n  toggle2DIcon,\n  toggle3D,\n  toggle3DIcon,\n}: TreeHeaderComponentProps) {\n  return (\n    <SearchBar\n      value=\"\"\n      className=\"tree-widget-header-tree-search-bar\"\n      valueChangedDelay={500}\n      placeholder={TreeWidget.translate(\"search\")}\n      title={TreeWidget.translate(\"searchForSomething\")}\n      filteringInProgress={searchOptions.isFiltering}\n      onFilterCancel={searchOptions.onFilterCancel}\n      onFilterClear={searchOptions.onFilterCancel}\n      onFilterStart={searchOptions.onFilterStart}\n      onSelectedChanged={searchOptions.onResultSelectedChanged}\n      resultCount={searchOptions.matchedResultCount ?? 0}\n    >\n      <div className=\"tree-widget-search-bar-button-container\">\n        {showAll && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"show-all-btn\"\n            icon=\"icon-visibility\"\n            title={TreeWidget.translate(\"showAll\")}\n            onClick={showAll}\n          />\n        )}\n        {hideAll && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"hide-all-btn\"\n            icon=\"icon-visibility-hide-2\"\n            title={TreeWidget.translate(\"hideAll\")}\n            onClick={hideAll}\n          />\n        )}\n        {invert && (\n          <IconButton\n            key=\"invert-all-btn\"\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            title={TreeWidget.translate(\"invert\")}\n            icon=\"icon-visibility-invert\"\n            onClick={invert}\n          />\n        )}\n        {toggle2D && toggle2DIcon && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"view-2d-btn\"\n            icon={toggle2DIcon}\n            title={TreeWidget.translate(\"toggle2DViews\")}\n            onClick={toggle2D}\n            label={TreeWidget.translate(\"label2D\")}\n          />\n        )}\n        {toggle3D && toggle3DIcon && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"view-3d-btn\"\n            icon={toggle3DIcon}\n            title={TreeWidget.translate(\"toggle3DViews\")}\n            onClick={toggle3D}\n            label={TreeWidget.translate(\"label3D\")}\n          />\n        )}\n      </div>\n    </SearchBar>\n  );\n}\n"]}
+{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/header/TreeHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,8CAA2C;AAC3C,uDAAoD;AAEpD,iDAA8C;AAC9C,6BAA2B;AAa3B,SAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,GACa;;IACzB,OAAO,CACL,oBAAC,qBAAS,IACR,KAAK,EAAC,EAAE,EACR,SAAS,EAAC,oCAAoC,EAC9C,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EAC3C,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,EACjD,mBAAmB,EAAE,aAAa,CAAC,WAAW,EAC9C,cAAc,EAAE,aAAa,CAAC,cAAc,EAC5C,aAAa,EAAE,aAAa,CAAC,cAAc,EAC3C,aAAa,EAAE,aAAa,CAAC,aAAa,EAC1C,iBAAiB,EAAE,aAAa,CAAC,uBAAuB,EACxD,WAAW,EAAE,MAAA,aAAa,CAAC,kBAAkB,mCAAI,CAAC;QAElD,6BAAK,SAAS,EAAC,yCAAyC;YACrD,OAAO,IAAI,CACV,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,OAAO,IAAI,CACV,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,MAAM,IAAI,CACT,oBAAC,uBAAU,IACT,GAAG,EAAC,gBAAgB,EACpB,SAAS,EAAE,sCAAsC,EACjD,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EACrC,IAAI,EAAC,wBAAwB,EAC7B,OAAO,EAAE,MAAM,GACf,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH,CACG,CACI,CACb,CAAC;AACJ,CAAC;AA3ED,kDA2EC","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 { IconButton } from \"../IconButton\";\nimport { SearchBar } from \"../search-bar/SearchBar\";\nimport type { SearchOptions } from \"../TreeFilteringState\";\nimport { TreeWidget } from \"../../TreeWidget\";\nimport \"./TreeHeader.scss\";\n\nexport interface TreeHeaderComponentProps {\n  showAll?: () => void;\n  hideAll?: () => void;\n  invert?: () => void;\n  toggle2D?: () => void;\n  toggle2DIcon?: string;\n  toggle3D?: () => void;\n  toggle3DIcon?: string;\n  searchOptions: SearchOptions;\n}\n\nexport function TreeHeaderComponent({\n  searchOptions,\n  showAll,\n  hideAll,\n  invert,\n  toggle2D,\n  toggle2DIcon,\n  toggle3D,\n  toggle3DIcon,\n}: TreeHeaderComponentProps) {\n  return (\n    <SearchBar\n      value=\"\"\n      className=\"tree-widget-header-tree-search-bar\"\n      valueChangedDelay={500}\n      placeholder={TreeWidget.translate(\"search\")}\n      title={TreeWidget.translate(\"searchForSomething\")}\n      filteringInProgress={searchOptions.isFiltering}\n      onFilterCancel={searchOptions.onFilterCancel}\n      onFilterClear={searchOptions.onFilterCancel}\n      onFilterStart={searchOptions.onFilterStart}\n      onSelectedChanged={searchOptions.onResultSelectedChanged}\n      resultCount={searchOptions.matchedResultCount ?? 0}\n    >\n      <div className=\"tree-widget-search-bar-button-container\">\n        {showAll && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"show-all-btn\"\n            icon=\"icon-visibility\"\n            title={TreeWidget.translate(\"showAll\")}\n            onClick={showAll}\n          />\n        )}\n        {hideAll && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"hide-all-btn\"\n            icon=\"icon-visibility-hide-2\"\n            title={TreeWidget.translate(\"hideAll\")}\n            onClick={hideAll}\n          />\n        )}\n        {invert && (\n          <IconButton\n            key=\"invert-all-btn\"\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            title={TreeWidget.translate(\"invert\")}\n            icon=\"icon-visibility-invert\"\n            onClick={invert}\n          />\n        )}\n        {toggle2D && toggle2DIcon && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"view-2d-btn\"\n            icon={toggle2DIcon}\n            title={TreeWidget.translate(\"toggle2DViews\")}\n            onClick={toggle2D}\n            label={TreeWidget.translate(\"label2D\")}\n          />\n        )}\n        {toggle3D && toggle3DIcon && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"view-3d-btn\"\n            icon={toggle3DIcon}\n            title={TreeWidget.translate(\"toggle3DViews\")}\n            onClick={toggle3D}\n            label={TreeWidget.translate(\"label3D\")}\n          />\n        )}\n      </div>\n    </SearchBar>\n  );\n}\n"]}

package/lib/cjs/components/search-bar/Popup.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 import { RelativePosition } from "@itwin/appui-abstract";
 import "./Popup.scss";
 /** Properties for the [[Popup]] component */

package/lib/cjs/components/search-bar/Popup.js

@@ -99,7 +99,7 @@ class Popup extends React.Component {
         }
         document.removeEventListener("click", this._onBodyClick, true);
         document.removeEventListener("keydown", this._onEsc, true);
-        // tslint:disable-next-line:tslint-react-set-state-usage
+        // eslint-disable-next-line @itwin/react-set-state-usage
         this.setState({ isShown: false, position: this.props.position }, () => {
             if (this.props.onClose)
                 this.props.onClose();

package/lib/cjs/components/search-bar/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../src/components/search-bar/Popup.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\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport \"./Popup.scss\";\n\n/** Properties for the [[Popup]] component */\nexport interface PopupProps extends CommonProps {\n  /**  show or hide the box shadow */\n  showShadow: boolean;\n  /** show or hide the arrow */\n  showArrow: boolean;\n  /** indicate if the popup is shown or not */\n  isShown: boolean;\n  /** Direction (relative to the target) to which the popup is expanded */\n  position: RelativePosition;\n  /** Fixed position in the viewport */\n  fixedPosition?: { top: number; left: number };\n  /** target element */\n  context: HTMLElement | null;\n  /** Function called when the popup is opened */\n  onOpen?: () => void;\n  /** Function called when the popup is closed */\n  onClose?: () => void;\n}\n\ninterface PopupState {\n  isShown: boolean;\n  position: RelativePosition;\n}\n\ninterface Rect {\n  left: number;\n  top: number;\n  right: number;\n  bottom: number;\n}\n\n/** Popup React component */\nexport class Popup extends React.Component<PopupProps, PopupState> {\n  private _popupRef = React.createRef<HTMLDivElement>();\n  private _targetElement?: HTMLElement; // target element owning the popup\n\n  constructor(props: PopupProps, context?: any) {\n    super(props, context);\n\n    this.state = { isShown: this.props.isShown, position: this.props.position };\n  }\n\n  public static defaultProps: Partial<PopupProps> = {\n    position: RelativePosition.Bottom,\n    showShadow: true,\n    showArrow: false,\n  };\n\n  public componentDidMount() {\n    const popupElement = this._popupRef.current;\n    if (popupElement && popupElement.parentElement) {\n      this._targetElement = popupElement.parentElement;\n    }\n  }\n\n  public componentDidUpdate(previousProps: PopupProps) {\n    if (this.props.isShown === previousProps.isShown) return;\n\n    if (this.props.isShown) {\n      this._onShow();\n    } else {\n      this._onClose();\n    }\n  }\n\n  public componentWillUnmount() {\n    document.body.removeEventListener(\"click\", this._onBodyClick, false);\n    document.body.removeEventListener(\"keydown\", this._onEsc, false);\n  }\n\n  private _onBodyClick = (event: MouseEvent): void => {\n    const context = this._getContext();\n\n    // Ignore clicks on the popover or button\n    if (context === event.target) {\n      return;\n    }\n\n    if (context && context.contains(event.target as Node)) {\n      return;\n    }\n\n    if (\n      this._popupRef.current &&\n      (this._popupRef.current === event.target ||\n        this._popupRef.current.contains(event.target as Node))\n    ) {\n      return;\n    }\n\n    this._onClose();\n  };\n\n  private _onEsc = (event: KeyboardEvent): void => {\n    // Esc key\n    if (event.key === \"Escape\") {\n      this._onClose();\n    }\n  };\n\n  private _onShow() {\n    if (this.state.isShown) {\n      return;\n    }\n\n    document.addEventListener(\"click\", this._onBodyClick, true);\n    document.addEventListener(\"keydown\", this._onEsc, true);\n\n    const newPosition = this.getPositionWithinViewport();\n    this.setState({ position: newPosition, isShown: true }, () => {\n      if (this.props.onOpen) this.props.onOpen();\n    });\n  }\n\n  private _onClose() {\n    if (!this.state.isShown) {\n      return;\n    }\n\n    document.removeEventListener(\"click\", this._onBodyClick, true);\n    document.removeEventListener(\"keydown\", this._onEsc, true);\n\n    // tslint:disable-next-line:tslint-react-set-state-usage\n    this.setState({ isShown: false, position: this.props.position }, () => {\n      if (this.props.onClose) this.props.onClose();\n    });\n  }\n\n  private _getContext = () => this.props.context || this._targetElement;\n\n  private getPositionClassName(position: RelativePosition): string {\n    switch (position) {\n      case RelativePosition.TopLeft:\n        return classnames(\"tree-widget-search-popup-top-left\");\n      case RelativePosition.TopRight:\n        return classnames(\"tree-widget-search-popup-top-right\");\n      case RelativePosition.BottomLeft:\n        return classnames(\"tree-widget-search-popup-bottom-left\");\n      case RelativePosition.BottomRight:\n        return classnames(\"tree-widget-search-popup-bottom-right\");\n      case RelativePosition.Top:\n        return classnames(\"tree-widget-search-popup-top\");\n      case RelativePosition.Left:\n        return classnames(\"tree-widget-search-popup-left\");\n      case RelativePosition.Right:\n        return classnames(\"tree-widget-search-popup-right\");\n      default:\n        return classnames(\"tree-widget-search-popup-bottom\");\n    }\n  }\n\n  private getPositionWithinViewport(): RelativePosition {\n    const popupElement = this._popupRef.current;\n\n    if (!popupElement || !this._targetElement) return this.props.position;\n    // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)\n    const viewportRect: Rect = {\n      left: window.scrollX,\n      top: window.scrollY,\n      right: window.scrollX + window.innerWidth,\n      bottom: window.scrollY + window.innerHeight,\n    };\n    const targetRect = this._targetElement.getBoundingClientRect();\n    const popupRect = popupElement.getBoundingClientRect();\n    const containerStyle = window.getComputedStyle(this._targetElement);\n    const offset = this.props.showArrow ? 12 : 4;\n\n    switch (this.props.position) {\n      case RelativePosition.BottomRight: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.TopRight;\n        }\n        break;\n      }\n\n      case RelativePosition.TopRight: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.BottomRight;\n        }\n        break;\n      }\n\n      case RelativePosition.TopLeft: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.BottomLeft;\n        }\n        break;\n      }\n\n      case RelativePosition.BottomLeft: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.TopLeft;\n        }\n        break;\n      }\n\n      case RelativePosition.Bottom: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.Top;\n        }\n        break;\n      }\n\n      case RelativePosition.Top: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.Bottom;\n        }\n        break;\n      }\n\n      case RelativePosition.Left: {\n        const leftMargin = containerStyle.marginLeft\n          ? parseFloat(containerStyle.marginLeft)\n          : 0;\n        if (\n          targetRect.left - popupRect.width - leftMargin - offset <\n          viewportRect.left\n        ) {\n          return RelativePosition.Right;\n        }\n        break;\n      }\n\n      case RelativePosition.Right: {\n        const rightMargin = containerStyle.marginRight\n          ? parseFloat(containerStyle.marginRight)\n          : 0;\n        if (\n          targetRect.right + popupRect.width + rightMargin + offset >\n          viewportRect.right\n        ) {\n          return RelativePosition.Left;\n        }\n        break;\n      }\n    }\n\n    return this.props.position;\n  }\n\n  public render(): JSX.Element {\n    const className = classnames(\n      \"tree-widget-search-popup\",\n      this.getPositionClassName(this.state.position),\n      this.props.showShadow && \"tree-widget-search-popup-shadow\",\n      this.state.isShown && \"visible\",\n      this.props.showArrow && \"arrow\",\n      this.props.className\n    );\n\n    let style: React.CSSProperties | undefined;\n    if (this.props.fixedPosition) {\n      style = {\n        top: this.props.fixedPosition.top,\n        left: this.props.fixedPosition.left,\n        position: \"fixed\",\n      };\n    }\n\n    return (\n      <div style={style} className={className} ref={this._popupRef}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../src/components/search-bar/Popup.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\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport \"./Popup.scss\";\n\n/** Properties for the [[Popup]] component */\nexport interface PopupProps extends CommonProps {\n  /**  show or hide the box shadow */\n  showShadow: boolean;\n  /** show or hide the arrow */\n  showArrow: boolean;\n  /** indicate if the popup is shown or not */\n  isShown: boolean;\n  /** Direction (relative to the target) to which the popup is expanded */\n  position: RelativePosition;\n  /** Fixed position in the viewport */\n  fixedPosition?: { top: number, left: number };\n  /** target element */\n  context: HTMLElement | null;\n  /** Function called when the popup is opened */\n  onOpen?: () => void;\n  /** Function called when the popup is closed */\n  onClose?: () => void;\n}\n\ninterface PopupState {\n  isShown: boolean;\n  position: RelativePosition;\n}\n\ninterface Rect {\n  left: number;\n  top: number;\n  right: number;\n  bottom: number;\n}\n\n/** Popup React component */\nexport class Popup extends React.Component<PopupProps, PopupState> {\n  private _popupRef = React.createRef<HTMLDivElement>();\n  private _targetElement?: HTMLElement; // target element owning the popup\n\n  constructor(props: PopupProps, context?: any) {\n    super(props, context);\n\n    this.state = { isShown: this.props.isShown, position: this.props.position };\n  }\n\n  public static defaultProps: Partial<PopupProps> = {\n    position: RelativePosition.Bottom,\n    showShadow: true,\n    showArrow: false,\n  };\n\n  public componentDidMount() {\n    const popupElement = this._popupRef.current;\n    if (popupElement && popupElement.parentElement) {\n      this._targetElement = popupElement.parentElement;\n    }\n  }\n\n  public componentDidUpdate(previousProps: PopupProps) {\n    if (this.props.isShown === previousProps.isShown) return;\n\n    if (this.props.isShown) {\n      this._onShow();\n    } else {\n      this._onClose();\n    }\n  }\n\n  public componentWillUnmount() {\n    document.body.removeEventListener(\"click\", this._onBodyClick, false);\n    document.body.removeEventListener(\"keydown\", this._onEsc, false);\n  }\n\n  private _onBodyClick = (event: MouseEvent): void => {\n    const context = this._getContext();\n\n    // Ignore clicks on the popover or button\n    if (context === event.target) {\n      return;\n    }\n\n    if (context && context.contains(event.target as Node)) {\n      return;\n    }\n\n    if (\n      this._popupRef.current &&\n      (this._popupRef.current === event.target ||\n        this._popupRef.current.contains(event.target as Node))\n    ) {\n      return;\n    }\n\n    this._onClose();\n  };\n\n  private _onEsc = (event: KeyboardEvent): void => {\n    // Esc key\n    if (event.key === \"Escape\") {\n      this._onClose();\n    }\n  };\n\n  private _onShow() {\n    if (this.state.isShown) {\n      return;\n    }\n\n    document.addEventListener(\"click\", this._onBodyClick, true);\n    document.addEventListener(\"keydown\", this._onEsc, true);\n\n    const newPosition = this.getPositionWithinViewport();\n    this.setState({ position: newPosition, isShown: true }, () => {\n      if (this.props.onOpen) this.props.onOpen();\n    });\n  }\n\n  private _onClose() {\n    if (!this.state.isShown) {\n      return;\n    }\n\n    document.removeEventListener(\"click\", this._onBodyClick, true);\n    document.removeEventListener(\"keydown\", this._onEsc, true);\n\n    // eslint-disable-next-line @itwin/react-set-state-usage\n    this.setState({ isShown: false, position: this.props.position }, () => {\n      if (this.props.onClose) this.props.onClose();\n    });\n  }\n\n  private _getContext = () => this.props.context || this._targetElement;\n\n  private getPositionClassName(position: RelativePosition): string {\n    switch (position) {\n      case RelativePosition.TopLeft:\n        return classnames(\"tree-widget-search-popup-top-left\");\n      case RelativePosition.TopRight:\n        return classnames(\"tree-widget-search-popup-top-right\");\n      case RelativePosition.BottomLeft:\n        return classnames(\"tree-widget-search-popup-bottom-left\");\n      case RelativePosition.BottomRight:\n        return classnames(\"tree-widget-search-popup-bottom-right\");\n      case RelativePosition.Top:\n        return classnames(\"tree-widget-search-popup-top\");\n      case RelativePosition.Left:\n        return classnames(\"tree-widget-search-popup-left\");\n      case RelativePosition.Right:\n        return classnames(\"tree-widget-search-popup-right\");\n      default:\n        return classnames(\"tree-widget-search-popup-bottom\");\n    }\n  }\n\n  private getPositionWithinViewport(): RelativePosition {\n    const popupElement = this._popupRef.current;\n\n    if (!popupElement || !this._targetElement) return this.props.position;\n    // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)\n    const viewportRect: Rect = {\n      left: window.scrollX,\n      top: window.scrollY,\n      right: window.scrollX + window.innerWidth,\n      bottom: window.scrollY + window.innerHeight,\n    };\n    const targetRect = this._targetElement.getBoundingClientRect();\n    const popupRect = popupElement.getBoundingClientRect();\n    const containerStyle = window.getComputedStyle(this._targetElement);\n    const offset = this.props.showArrow ? 12 : 4;\n\n    switch (this.props.position) {\n      case RelativePosition.BottomRight: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.TopRight;\n        }\n        break;\n      }\n\n      case RelativePosition.TopRight: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.BottomRight;\n        }\n        break;\n      }\n\n      case RelativePosition.TopLeft: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.BottomLeft;\n        }\n        break;\n      }\n\n      case RelativePosition.BottomLeft: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.TopLeft;\n        }\n        break;\n      }\n\n      case RelativePosition.Bottom: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.Top;\n        }\n        break;\n      }\n\n      case RelativePosition.Top: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.Bottom;\n        }\n        break;\n      }\n\n      case RelativePosition.Left: {\n        const leftMargin = containerStyle.marginLeft\n          ? parseFloat(containerStyle.marginLeft)\n          : 0;\n        if (\n          targetRect.left - popupRect.width - leftMargin - offset <\n          viewportRect.left\n        ) {\n          return RelativePosition.Right;\n        }\n        break;\n      }\n\n      case RelativePosition.Right: {\n        const rightMargin = containerStyle.marginRight\n          ? parseFloat(containerStyle.marginRight)\n          : 0;\n        if (\n          targetRect.right + popupRect.width + rightMargin + offset >\n          viewportRect.right\n        ) {\n          return RelativePosition.Left;\n        }\n        break;\n      }\n    }\n\n    return this.props.position;\n  }\n\n  public render(): JSX.Element {\n    const className = classnames(\n      \"tree-widget-search-popup\",\n      this.getPositionClassName(this.state.position),\n      this.props.showShadow && \"tree-widget-search-popup-shadow\",\n      this.state.isShown && \"visible\",\n      this.props.showArrow && \"arrow\",\n      this.props.className\n    );\n\n    let style: React.CSSProperties | undefined;\n    if (this.props.fixedPosition) {\n      style = {\n        top: this.props.fixedPosition.top,\n        left: this.props.fixedPosition.left,\n        position: \"fixed\",\n      };\n    }\n\n    return (\n      <div style={style} className={className} ref={this._popupRef}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/components/search-bar/SearchBar.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 import "./SearchBar.scss";
 export declare enum Alignment {
     Left = 0,

package/lib/cjs/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 { CommonProps } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup } from \"./Popup\";\nimport { SearchBox } from \"./SearchBox\";\nimport { IconButton } from \"../IconButton\";\nimport \"./SearchBar.scss\";\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  onFilterCancel?: () => 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<\n  SearchBarProps,\n  SearchBarState\n  > {\n  private _target: HTMLElement | null = null;\n  private _searchBox = React.createRef<SearchBox>();\n\n  public static defaultProps: Partial<SearchBarProps> = {\n    alignment: Alignment.Left,\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  private _onCloseDropdown = () => {\n    this.setState({ showDropdown: false });\n  };\n\n  private _onToggleDropdown = () => {\n    this.setState((prevState) => ({ showDropdown: !prevState.showDropdown }));\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, showDropdown } = 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 groupButtonClassName = classnames(\n      \"search-bar-group-button2\",\n      showSearch && enableGrouping && \"show\"\n    );\n    const contentClassName = classnames(\n      \"search-bar-button-container\",\n      showSearch && \"hide\",\n      alignment === Alignment.Right && \"right\"\n    );\n    const searchBarContainerClassName = classnames(\n      \"search-bar-search-container\",\n      enableGrouping && \"search-bar-grouping-enabled\",\n    );\n\n    return (\n      <div className={classes}>\n        <div\n          className={groupButtonClassName}\n          ref={(element) => {\n            this._target = element;\n          }}\n        >\n          <IconButton icon=\"icon-more-2\" onClick={this._onToggleDropdown} />\n        </div>\n        <div className={contentClassName}>{this.props.children}</div>\n        <div className={searchBarContainerClassName}>\n          <SearchBox\n            ref={this._searchBox}\n            className={searchBoxClassName}\n            searchText={value}\n            valueChangedDelay={valueChangedDelay}\n            placeholder={placeholder}\n            onFilterCancel={this.props.onFilterCancel}\n            onFilterClear={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        <IconButton\n          className={searchIconClassName}\n          icon=\"icon-search\"\n          onClick={this._onToggleSearch}\n          title={title}\n        />\n        {showSearch && (\n          <Popup\n            isShown={showDropdown}\n            position={RelativePosition.BottomLeft}\n            onClose={this._onCloseDropdown}\n            context={this._target}\n          >\n            <div className=\"search-bar-dropdown-container\">\n              {this.props.children}\n            </div>\n          </Popup>\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 { RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup } from \"./Popup\";\nimport { SearchBox } from \"./SearchBox\";\nimport { IconButton } from \"../IconButton\";\nimport \"./SearchBar.scss\";\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  onFilterCancel?: () => 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 _target: HTMLElement | null = null;\n  private _searchBox = React.createRef<SearchBox>();\n\n  public static defaultProps: Partial<SearchBarProps> = {\n    alignment: Alignment.Left,\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  private _onCloseDropdown = () => {\n    this.setState({ showDropdown: false });\n  };\n\n  private _onToggleDropdown = () => {\n    this.setState((prevState) => ({ showDropdown: !prevState.showDropdown }));\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, showDropdown } = 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 groupButtonClassName = classnames(\n      \"search-bar-group-button2\",\n      showSearch && enableGrouping && \"show\"\n    );\n    const contentClassName = classnames(\n      \"search-bar-button-container\",\n      showSearch && \"hide\",\n      alignment === Alignment.Right && \"right\"\n    );\n    const searchBarContainerClassName = classnames(\n      \"search-bar-search-container\",\n      enableGrouping && \"search-bar-grouping-enabled\",\n    );\n\n    return (\n      <div className={classes}>\n        <div\n          className={groupButtonClassName}\n          ref={(element) => {\n            this._target = element;\n          }}\n        >\n          <IconButton icon=\"icon-more-2\" onClick={this._onToggleDropdown} />\n        </div>\n        <div className={contentClassName}>{this.props.children}</div>\n        <div className={searchBarContainerClassName}>\n          <SearchBox\n            ref={this._searchBox}\n            className={searchBoxClassName}\n            searchText={value}\n            valueChangedDelay={valueChangedDelay}\n            placeholder={placeholder}\n            onFilterCancel={this.props.onFilterCancel}\n            onFilterClear={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        <IconButton\n          className={searchIconClassName}\n          icon=\"icon-search\"\n          onClick={this._onToggleSearch}\n          title={title}\n        />\n        {showSearch && (\n          <Popup\n            isShown={showDropdown}\n            position={RelativePosition.BottomLeft}\n            onClose={this._onCloseDropdown}\n            context={this._target}\n          >\n            <div className=\"search-bar-dropdown-container\">\n              {this.props.children}\n            </div>\n          </Popup>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/components/search-bar/SearchBox.d.ts

@@ -1,6 +1,6 @@
 /** @module SearchBox */
 import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 import "./SearchBox.scss";
 export interface SearchBoxProps extends CommonProps {
     /** value to set SearchBox */
@@ -29,8 +29,6 @@ export interface SearchBoxProps extends CommonProps {
     resultCount: number;
     /** Callback to currently selected result/entry change */
     onSelectedChanged: (index: number) => void;
-    /** Specify that the <input> element should automatically get focus */
-    autoFocus?: boolean;
 }
 /**
  * Enumeration of possible component contexts

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

@@ -92,7 +92,7 @@ class SearchBox extends React.PureComponent {
                     break;
             }
         };
-        this._handleIconClick = (_event) => {
+        this._handleIconClick = () => {
             // istanbul ignore else
             if (this._inputElement) {
                 const clear = this.state.searchText !== "";
@@ -162,7 +162,7 @@ class SearchBox extends React.PureComponent {
         return null;
     }
     render() {
-        const { autoFocus, className, style, resultCount, placeholder, } = this.props;
+        const { className, style, resultCount, placeholder, } = this.props;
         const { searchText, selectedIndex } = this.state;
         const searchClassName = classnames_1.default("tree-widget-searchbox", className);
         const showCount = resultCount > 0;
@@ -171,13 +171,13 @@ class SearchBox extends React.PureComponent {
         return (React.createElement("div", { className: searchClassName, style: style },
             React.createElement("input", { value: searchText, ref: (el) => {
                     this._inputElement = el;
-                }, autoFocus: autoFocus, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: placeholder ? placeholder : TreeWidget_1.TreeWidget.translate("searchbox.search") }),
+                }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: placeholder ? placeholder : TreeWidget_1.TreeWidget.translate("searchbox.search") }),
             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_1.IconButton, { className: "searchbox-step-button", icon: "icon-chevron-up", disabled: !isPrevEnabled, onClick: this._onPrevClick, title: "Previous" }),
                 React.createElement(IconButton_1.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 })));
+            React.createElement("span", { className: "searchbox-step-button icon icon-close searchbox-close-button", onClick: this._handleIconClick, onKeyDown: this._handleIconClick, role: "button", tabIndex: 0 })));
     }
 }
 exports.SearchBox = SearchBox;