@itwin/tree-widget-react 0.6.2 → 0.7.0

package/lib/cjs/TreeWidget.js

@@ -50,7 +50,7 @@ class TreeWidget {
         return TreeWidget.i18n.getLocalizedString(stringKey, options);
     }
     static loggerCategory(obj) {
-        const className = appui_abstract_1.getClassName(obj);
+        const className = (0, appui_abstract_1.getClassName)(obj);
         const category = TreeWidget.packageName + (className ? `.${className}` : "");
         return category;
     }

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,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,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;QAC7B,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,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,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CACvC,SAAS,EACT,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,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;AA/DD,gCA+DC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type { Localization } from \"@itwin/core-common\";\nimport type { LocalizationOptions } from \"@itwin/core-i18n\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   */\n  public static async initialize(i18n?: Localization): Promise<void> {\n    if (this._initialized) return;\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n)\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n    TreeWidget._i18n = undefined;\n    TreeWidget._initialized = false;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n)\n      throw new UiError(\n        TreeWidget.loggerCategory(this),\n        \"TreeWidget not initialized\"\n      );\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(\n      stringKey,\n      options\n    );\n  }\n\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      TreeWidget.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,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,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,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;QAC7B,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,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,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CACvC,SAAS,EACT,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,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;AA/DD,gCA+DC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type { Localization } from \"@itwin/core-common\";\nimport type { LocalizationOptions } from \"@itwin/core-i18n\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   */\n  public static async initialize(i18n?: Localization): Promise<void> {\n    if (this._initialized) return;\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n)\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n    TreeWidget._i18n = undefined;\n    TreeWidget._initialized = false;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n)\n      throw new UiError(\n        TreeWidget.loggerCategory(this),\n        \"TreeWidget not initialized\"\n      );\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(\n      stringKey,\n      options\n    );\n  }\n\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      TreeWidget.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}

package/lib/cjs/components/IconButton.js

@@ -34,9 +34,9 @@ require("./IconButton.scss");
 function IconButton({ className, icon, onClick, label, ...otherProps }) {
     return (React.createElement(React.Fragment, null,
         label &&
-            React.createElement("span", { className: classnames_1.default("tree-widget-icon-label", className) }, label),
-        React.createElement("button", { ...otherProps, className: classnames_1.default("tree-widget-icon-button", className), onClick: onClick },
-            React.createElement("span", { className: classnames_1.default("icon", icon) }))));
+            React.createElement("span", { className: (0, classnames_1.default)("tree-widget-icon-label", className) }, label),
+        React.createElement("button", { ...otherProps, className: (0, classnames_1.default)("tree-widget-icon-button", className), onClick: onClick },
+            React.createElement("span", { className: (0, classnames_1.default)("icon", icon) }))));
 }
 exports.IconButton = IconButton;
 //# sourceMappingURL=IconButton.js.map

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 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"]}
+{"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,IAAA,oBAAU,EAAC,wBAAwB,EAAE,SAAS,CAAC,IAC7D,KAAK,CACD;QAET,mCACM,UAAU,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,yBAAyB,EAAE,SAAS,CAAC,EAC3D,OAAO,EAAE,OAAO;YAEhB,8BAAM,SAAS,EAAE,IAAA,oBAAU,EAAC,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.js

@@ -26,10 +26,10 @@ exports.useTreeFilteringState = void 0;
 *--------------------------------------------------------------------------------------------*/
 const react_1 = __importStar(require("react"));
 const useTreeFilteringState = () => {
-    const [filterString, setFilterString] = react_1.useState("");
-    const [matchedResultCount, setMatchedResultCount] = react_1.useState();
-    const [activeMatchIndex, setActiveMatchIndex] = react_1.useState();
-    const [filteredProvider, setFilteredProvider] = react_1.useState();
+    const [filterString, setFilterString] = (0, react_1.useState)("");
+    const [matchedResultCount, setMatchedResultCount] = (0, react_1.useState)();
+    const [activeMatchIndex, setActiveMatchIndex] = (0, react_1.useState)();
+    const [filteredProvider, setFilteredProvider] = (0, react_1.useState)();
     const onFilterCancel = react_1.default.useCallback(() => {
         setFilterString("");
         setMatchedResultCount(undefined);

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 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"]}
+{"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,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IACvE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IACnE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,GAAiC,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,6 +1,6 @@
 /// <reference types="react" />
 import "./TreeWidgetComponent.scss";
-import type { SelectableContentDefinition } from "@itwin/components-react";
+import { SelectableContentDefinition } from "@itwin/components-react";
 interface TreeWidgetComponentProps {
     trees?: SelectableContentDefinition[];
 }

package/lib/cjs/components/TreeWidgetComponent.js

@@ -1,4 +1,8 @@
 "use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -20,12 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeWidgetComponent = 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 React = __importStar(require("react"));
 require("./TreeWidgetComponent.scss");
+const React = __importStar(require("react"));
 const components_react_1 = require("@itwin/components-react");
 function TreeWidgetComponent(props) {
     const trees = [];

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,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"]}
+{"version":3,"file":"TreeWidgetComponent.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;;;;;;;;;;;;;;;;;AAE/F,sCAAoC;AACpC,6CAA+B;AAC/B,8DAAyF;AAMzF,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*--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetComponent.scss\";\nimport * as React from \"react\";\nimport { SelectableContent, SelectableContentDefinition } 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/TreeWidgetComponent.scss

@@ -60,5 +60,5 @@
 }
 
 .tree-widget-search-bar {
-  margin-bottom: $uicore-s;
+  margin-bottom: 4px;
 }

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

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

package/lib/cjs/components/TreeWidgetUiItemsProvider.js

@@ -1,19 +1,24 @@
 "use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable react/display-name */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeWidgetUiItemsProvider = exports.TreeWidgetId = void 0;
+const react_1 = __importDefault(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
-const appui_abstract_2 = require("@itwin/appui-abstract");
 const appui_react_1 = require("@itwin/appui-react");
-const react_1 = __importDefault(require("react"));
-const TreeWidgetComponent_1 = require("./TreeWidgetComponent");
+const TreeWidget_1 = require("../TreeWidget");
+const types_1 = require("../types");
 const CategoriesTreeComponent_1 = require("./trees/category-tree/CategoriesTreeComponent");
+const Common_1 = require("./trees/Common");
 const ModelsTreeComponent_1 = require("./trees/models-tree/ModelsTreeComponent");
 const SpatialTreeComponent_1 = require("./trees/spatial-tree/SpatialTreeComponent");
-const TreeWidget_1 = require("../TreeWidget");
-const types_1 = require("../types");
+const TreeWidgetComponent_1 = require("./TreeWidgetComponent");
 exports.TreeWidgetId = "tree-widget-react:trees";
 class TreeWidgetUiItemsProvider {
     constructor(_treeWidgetOptions) {
@@ -25,13 +30,13 @@ class TreeWidgetUiItemsProvider {
     zoneLocation) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const widgets = [];
-        const preferredLocation = (_b = (_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.defaultPanelLocation) !== null && _b !== void 0 ? _b : appui_abstract_2.StagePanelLocation.Right;
-        const preferredPanelSection = (_d = (_c = this._treeWidgetOptions) === null || _c === void 0 ? void 0 : _c.defaultPanelSection) !== null && _d !== void 0 ? _d : appui_abstract_1.StagePanelSection.Start;
+        const preferredLocation = (_b = (_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.defaultPanelLocation) !== null && _b !== void 0 ? _b : appui_react_1.StagePanelLocation.Right;
+        const preferredPanelSection = (_d = (_c = this._treeWidgetOptions) === null || _c === void 0 ? void 0 : _c.defaultPanelSection) !== null && _d !== void 0 ? _d : appui_react_1.StagePanelSection.Start;
         if (
         // eslint-disable-next-line deprecation/deprecation
-        (!section && stageUsage === appui_abstract_2.StageUsage.General && zoneLocation === appui_abstract_2.AbstractZoneLocation.CenterRight) ||
-            (stageUsage === appui_abstract_2.StageUsage.General && location === preferredLocation && section === preferredPanelSection
-                && appui_react_1.UiFramework.uiVersion !== "1")) {
+        (!section && stageUsage === appui_react_1.StageUsage.General && zoneLocation === appui_abstract_1.AbstractZoneLocation.CenterRight) ||
+            // eslint-disable-next-line deprecation/deprecation
+            (stageUsage === appui_react_1.StageUsage.General && location === preferredLocation && section === preferredPanelSection && appui_react_1.UiFramework.uiVersion !== "1")) {
             const trees = [];
             if (!((_f = (_e = this._treeWidgetOptions) === null || _e === void 0 ? void 0 : _e.hideTrees) === null || _f === void 0 ? void 0 : _f.modelsTree)) {
                 trees.push({
@@ -40,8 +45,8 @@ class TreeWidgetUiItemsProvider {
                     render: () => {
                         var _a, _b;
                         return (react_1.default.createElement(ModelsTreeComponent_1.ModelsTreeComponent, { enableElementsClassGrouping: ((_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.enableElementsClassGrouping)
-                                ? appui_react_1.ClassGroupingOption.YesWithCounts
-                                : appui_react_1.ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.modelsTreeProps }));
+                                ? Common_1.ClassGroupingOption.YesWithCounts
+                                : Common_1.ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.modelsTreeProps }));
                     },
                 });
             }
@@ -62,8 +67,8 @@ class TreeWidgetUiItemsProvider {
                     render: () => {
                         var _a, _b;
                         return (react_1.default.createElement(SpatialTreeComponent_1.SpatialTreeComponent, { enableElementsClassGrouping: ((_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.enableElementsClassGrouping)
-                                ? appui_react_1.ClassGroupingOption.YesWithCounts
-                                : appui_react_1.ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.spatialTreeProps }));
+                                ? Common_1.ClassGroupingOption.YesWithCounts
+                                : Common_1.ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.spatialTreeProps }));
                     },
                 });
             }

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

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

@@ -39,14 +39,11 @@ interface SearchBarState {
 }
 /** SearchBox with expanding search box capability */
 export declare class SearchBar extends React.PureComponent<SearchBarProps, SearchBarState> {
-    private _target;
     private _searchBox;
     static defaultProps: Partial<SearchBarProps>;
     constructor(props: any);
     componentDidUpdate(prevProps: SearchBarProps): Promise<void>;
     private _onToggleSearch;
-    private _onCloseDropdown;
-    private _onToggleDropdown;
     render(): JSX.Element;
 }
 export {};

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

@@ -29,11 +29,10 @@ exports.SearchBar = exports.Alignment = void 0;
 *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const Popup_1 = require("./Popup");
 const SearchBox_1 = require("./SearchBox");
-const IconButton_1 = require("../IconButton");
 require("./SearchBar.scss");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 var Alignment;
 (function (Alignment) {
     Alignment[Alignment["Left"] = 0] = "Left";
@@ -43,7 +42,6 @@ var Alignment;
 class SearchBar extends React.PureComponent {
     constructor(props) {
         super(props);
-        this._target = null;
         this._searchBox = React.createRef();
         this._onToggleSearch = (_event) => {
             const showSearch = !this.state.showSearch;
@@ -55,12 +53,6 @@ class SearchBar extends React.PureComponent {
                     }, 100); // timeout allows the search bar animation to complete!
             });
         };
-        this._onCloseDropdown = () => {
-            this.setState({ showDropdown: false });
-        };
-        this._onToggleDropdown = () => {
-            this.setState((prevState) => ({ showDropdown: !prevState.showDropdown }));
-        };
         this.state = { showSearch: props.showSearch, showDropdown: false };
     }
     async componentDidUpdate(prevProps) {
@@ -69,29 +61,26 @@ class SearchBar extends React.PureComponent {
     }
     render() {
         const { value, alignment, valueChangedDelay, placeholder, enableGrouping, title, } = this.props;
-        const { showSearch, showDropdown } = this.state;
-        const classes = classnames_1.default("tree-widget-search-bar", this.props.className);
-        const searchBoxClassName = classnames_1.default("search-bar-search-box", showSearch && "show");
-        const searchIconClassName = classnames_1.default("search-bar-search-icon", showSearch ? "hide" : "show");
-        const groupButtonClassName = classnames_1.default("search-bar-group-button2", showSearch && enableGrouping && "show");
-        const contentClassName = classnames_1.default("search-bar-button-container", showSearch && "hide", alignment === Alignment.Right && "right");
-        const searchBarContainerClassName = classnames_1.default("search-bar-search-container", enableGrouping && "search-bar-grouping-enabled");
+        const { showSearch } = this.state;
+        const classes = (0, classnames_1.default)("tree-widget-search-bar", this.props.className);
+        const searchBoxClassName = (0, classnames_1.default)("search-bar-search-box", showSearch && "show");
+        const searchIconClassName = (0, classnames_1.default)("search-bar-search-icon", showSearch ? "hide" : "show");
+        const contentClassName = (0, classnames_1.default)("search-bar-button-container", showSearch && "contracted", alignment === Alignment.Right && "right");
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: groupButtonClassName, ref: (element) => {
-                    this._target = element;
-                } },
-                React.createElement(IconButton_1.IconButton, { icon: "icon-more-2", onClick: this._onToggleDropdown })),
-            React.createElement("div", { className: contentClassName }, this.props.children),
-            React.createElement("div", { className: searchBarContainerClassName },
-                React.createElement(SearchBox_1.SearchBox, { ref: this._searchBox, className: searchBoxClassName, searchText: value, valueChangedDelay: valueChangedDelay, placeholder: placeholder, onFilterCancel: this.props.onFilterCancel, onFilterClear: this.props.onFilterClear, onFilterStart: this.props.onFilterStart, resultCount: this.props.resultCount, onIconClick: this._onToggleSearch, onSelectedChanged: this.props.onSelectedChanged })),
-            React.createElement(IconButton_1.IconButton, { className: searchIconClassName, icon: "icon-search", onClick: this._onToggleSearch, title: title }),
-            showSearch && (React.createElement(Popup_1.Popup, { isShown: showDropdown, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: this._onCloseDropdown, context: this._target },
-                React.createElement("div", { className: "search-bar-dropdown-container" }, this.props.children)))));
+            enableGrouping && React.createElement("div", { className: contentClassName },
+                React.createElement(itwinui_react_1.ButtonGroup, { overflowButton: (overflowStart) => (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: () => React.Children.toArray(this.props.children)
+                            .slice(overflowStart === 0 ? 0 : overflowStart - 1)
+                            .map((btn, index) => React.createElement(itwinui_react_1.MenuItem, { key: index }, btn)), className: "search-bar-dropdown-container" },
+                        React.createElement(itwinui_react_1.IconButton, { styleType: "borderless", size: "small" },
+                            React.createElement(itwinui_icons_react_1.SvgMore, null)))) }, this.props.children)),
+            showSearch ? (React.createElement("div", { className: "search-bar-search-container" },
+                React.createElement(SearchBox_1.SearchBox, { ref: this._searchBox, className: searchBoxClassName, searchText: value, valueChangedDelay: valueChangedDelay, placeholder: placeholder, onFilterCancel: this.props.onFilterCancel, onFilterClear: this.props.onFilterClear, onFilterStart: this.props.onFilterStart, resultCount: this.props.resultCount, onIconClick: this._onToggleSearch, onSelectedChanged: this.props.onSelectedChanged }))) : (React.createElement(itwinui_react_1.IconButton, { className: searchIconClassName, onClick: this._onToggleSearch, title: title, styleType: "borderless", size: "small" },
+                React.createElement(itwinui_icons_react_1.SvgSearch, null)))));
     }
 }
 exports.SearchBar = SearchBar;
 SearchBar.defaultProps = {
-    alignment: Alignment.Left,
+    alignment: Alignment.Right,
     enableGrouping: true,
 };
 //# sourceMappingURL=SearchBar.js.map

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

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

@@ -4,54 +4,45 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/index";
 
-.tree-widget-search-bar {
+// Buttons dropdown container
+.search-bar-dropdown-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  position: relative;
+  margin-top: 6px;
+}
 
-  // "..." group button
-  .search-bar-group-button2 {
-    opacity: 0;
-    display: none;
-    animation: hide ease-in 0.1s;
-    animation-fill-mode: forwards;
+.tree-widget-header-tree-toolbar-icon {
+  color: $buic-icon-color;
+}
 
-    &.search-bar-group-button2.show {
-      animation: show ease-in 0.25s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-      display: block;
-    }
-  }
+.tree-widget-search-bar {
+  display: flex;
+  align-items: center;
+  position: relative;
 
   // button container
   .search-bar-button-container {
     display: flex;
     align-items: center;
+    width: calc(100% - 26px);
 
     &.right {
       justify-content: flex-end;
     }
 
-    &.hide {
-      display: none;
+    &.contracted {
+      width: 32px;
     }
   }
 
-  // dropdown container
-  .search-bar-dropdown-container {
-    display: flex;
-    align-items: center;
-    padding: 0 $uicore-s;
-  }
-
   // override of the search box styling
   .search-bar-search-icon {
-    position: absolute;
-    right: 0;
     opacity: 0;
     transition: all 0.2s ease;
     color: $buic-icon-color;
+    height: 32px;
+
     &.show {
       opacity: 1;
     }
@@ -61,9 +52,6 @@
   .search-bar-search-container {
     flex: 1;
     height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
 
     .search-bar-search-box {
       height: 32px;
@@ -79,13 +67,9 @@
       &.show {
         visibility: visible;
         opacity: 1;
-        width: 100%;
+        width: 100%
       }
     }
-
-    &.search-bar-grouping-enabled {
-      left: 32px;
-    }
   }
 }
 

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

@@ -164,7 +164,7 @@ class SearchBox extends React.PureComponent {
     render() {
         const { className, style, resultCount, placeholder, } = this.props;
         const { searchText, selectedIndex } = this.state;
-        const searchClassName = classnames_1.default("tree-widget-searchbox", className);
+        const searchClassName = (0, classnames_1.default)("tree-widget-searchbox", className);
         const showCount = resultCount > 0;
         const isPrevEnabled = selectedIndex > 1;
         const isNextEnabled = selectedIndex < resultCount;