@itwin/tree-widget-react 0.1.1

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

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

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

@@ -0,0 +1,316 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/esm/core-react/index";
+
+.tree-widget-search-popup {
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  //  border-radius: 4px;
+  background: $buic-background-1;
+  border: 1px solid $buic-background-panel-stroke;
+  visibility: hidden;
+  z-index: 100;
+  animation-duration: 250ms;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+}
+
+.tree-widget-search-popup.arrow::after,
+.tree-widget-search-popup.arrow::before {
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::before {
+  bottom: 100%;
+  left: 25%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::before {
+  bottom: 100%;
+  left: 75%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::before {
+  bottom: 100%;
+  left: 50%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-top.arrow::before {
+  top: 100%;
+  left: 50%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::before {
+  top: 100%;
+  left: 25%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::before {
+  top: 100%;
+  left: 75%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-left.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-left.arrow::before {
+  top: 50%;
+  left: 100%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-right.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-right.arrow::before {
+  top: 50%;
+  right: 100%;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::before,
+.tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::before,
+.tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::before {
+  border-bottom-color: inherit;
+  border-width: 9px;
+  margin-left: -9px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top.arrow::before,
+.tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::before,
+.tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::before {
+  border-top-color: inherit;
+  border-width: 9px;
+  margin-left: -9px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-left.arrow::before {
+  border-left-color: inherit;
+  border-width: 9px;
+  margin-top: -9px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-right.arrow::before {
+  border-right-color: inherit;
+  border-width: 9px;
+  margin-top: -9px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::after {
+  border-bottom-color: currentColor;
+  border-width: 8px;
+  margin-left: -8px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::after,
+.tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::after {
+  border-top-color: currentColor;
+  border-width: 8px;
+  margin-left: -8px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-left.arrow::after {
+  border-left-color: currentColor;
+  border-width: 8px;
+  margin-top: -8px;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-right.arrow::after {
+  border-right-color: currentColor;
+  border-width: 8px;
+  margin-top: -8px;
+}
+
+.tree-widget-search-popup-top-left {
+  top: -4px;
+  left: 0;
+  transform: translateY(-100%);
+  transform-origin: left bottom 0;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top-left.visible {
+  animation-name: dr-animate-top-corner;
+}
+
+.tree-widget-search-popup-top {
+  top: -4px;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  transform-origin: bottom;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top.visible {
+  animation-name: dr-animate-top;
+}
+
+.tree-widget-search-popup-top-right {
+  top: -4px;
+  right: 0;
+  transform: translateY(-100%);
+  transform-origin: right bottom 0;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-top-right.visible {
+  animation-name: dr-animate-top-corner;
+}
+
+.tree-widget-search-popup-bottom-left {
+  top: calc(100% + 0px);
+  left: 0;
+  transform-origin: left top 0;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom-left.visible {
+  animation-name: dr-animate-bottom-corner;
+}
+
+.tree-widget-search-popup-bottom {
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  transform-origin: top;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom.visible {
+  animation-name: dr-animate-bottom;
+}
+
+.tree-widget-search-popup-bottom-right {
+  top: calc(100% + 4px);
+  right: 0;
+  transform-origin: right top 0;
+}
+
+.tree-widget-search-popup.tree-widget-search-popup-bottom-right.visible {
+  animation-name: dr-animate-bottom-corner;
+}
+
+.tree-widget-search-popup-left {
+  left: -4px;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  transform-origin: right;
+}
+
+.tree-widget-search-popup.popup-left.visible {
+  animation-name: dr-animate-left;
+}
+
+.tree-widget-search-popup-right {
+  right: -4px;
+  top: 50%;
+  transform: translate(100%, -50%);
+  transform-origin: left;
+}
+
+.tree-widget-search-popup.popup-right.visible {
+  animation-name: dr-animate-right;
+}
+
+.tree-widget-search-popup.popup-bottom-left.arrow,
+.tree-widget-search-popup.popup-bottom.arrow,
+.tree-widget-search-popup.popup-bottom-right.arrow {
+  top: calc(100% + 12px);
+}
+
+.tree-widget-search-popup.popup-top.arrow,
+.tree-widget-search-popup.popup-top-left.arrow,
+.tree-widget-search-popup.popup-top-right.arrow {
+  top: -12px;
+}
+
+.tree-widget-search-popup.popup-left.arrow {
+  left: -12px;
+}
+
+.tree-widget-search-popup.popup-right.arrow {
+  right: -12px;
+}
+
+.tree-widget-search-popup-shadow {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+  background-clip: padding-box;
+}
+
+@keyframes dr-animate-bottom {
+  from {
+    visibility: hidden;
+    transform: translateX(-50%) scale(1, 0);
+  }
+
+  to {
+    visibility: visible;
+    transform: translateX(-50%) scale(1);
+  }
+}
+
+@keyframes dr-animate-top {
+  from {
+    visibility: hidden;
+    transform: translate(-50%, -100%) scale(1, 0);
+  }
+
+  to {
+    visibility: visible;
+    transform: translate(-50%, -100%) scale(1);
+  }
+}
+
+@keyframes dr-animate-top-corner {
+  from {
+    visibility: hidden;
+    transform: translateY(-100%) scale(0);
+  }
+
+  to {
+    visibility: visible;
+    transform: translateY(-100%) scale(1);
+  }
+}
+
+@keyframes dr-animate-bottom-corner {
+  from {
+    visibility: hidden;
+    transform: scale(0);
+  }
+
+  to {
+    visibility: visible;
+    transform: scale(1);
+  }
+}
+
+@keyframes dr-animate-left {
+  from {
+    visibility: hidden;
+    transform: translate(-100%, -50%) scale(0, 1);
+  }
+
+  to {
+    visibility: visible;
+    transform: translate(-100%, -50%) scale(1);
+  }
+}
+
+@keyframes dr-animate-right {
+  from {
+    visibility: hidden;
+    transform: translate(100%, -50%) scale(0, 1);
+  }
+
+  to {
+    visibility: visible;
+    transform: translate(100%, -50%) scale(1);
+  }
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import "./SearchBar.scss";
+export declare enum Alignment {
+    Left = 0,
+    Right = 1
+}
+export interface SearchBarProps extends CommonProps {
+    /** value to set SearchBox */
+    value?: string;
+    /** Enable or disable dropdown functionality. If disabled, searchbox simply expands without displaying the group button */
+    enableGrouping: boolean;
+    /** show the search box in the open (expanded) state */
+    showSearch?: boolean;
+    /** alignment content to the left or right of the search bar */
+    alignment?: Alignment;
+    /** searchbox frequency to poll for changes in value (milliseconds) */
+    valueChangedDelay?: number;
+    /** searchbox placeholder value to show in gray before anything is entered in */
+    placeholder?: string;
+    /** title (tooltip) */
+    title?: string;
+    /** Tells the component if parent component is still handling the filtering */
+    filteringInProgress?: boolean;
+    /** Filtering is cleared after everything's loaded */
+    onFilterStart: (newFilter: string) => void;
+    /** Filtering is cleared after everything's loaded */
+    onFilterCancel?: () => void;
+    /** Filtering is cleared after everything's loaded */
+    onFilterClear?: () => void;
+    /** Total number of results/entries */
+    resultCount: number;
+    /** Callback to currently selected result/entry change */
+    onSelectedChanged: (index: number) => void;
+}
+interface SearchBarState {
+    showSearch: boolean;
+    showDropdown: boolean;
+}
+/** 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 {};
+//# sourceMappingURL=SearchBar.d.ts.map

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

@@ -0,0 +1,97 @@
+"use strict";
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = exports.Alignment = 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"));
+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");
+var Alignment;
+(function (Alignment) {
+    Alignment[Alignment["Left"] = 0] = "Left";
+    Alignment[Alignment["Right"] = 1] = "Right";
+})(Alignment = exports.Alignment || (exports.Alignment = {}));
+/** SearchBox with expanding search box capability */
+class SearchBar extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._target = null;
+        this._searchBox = React.createRef();
+        this._onToggleSearch = (_event) => {
+            const showSearch = !this.state.showSearch;
+            this.setState({ showSearch }, () => {
+                if (showSearch && this._searchBox.current)
+                    setTimeout(() => {
+                        if (this._searchBox.current)
+                            this._searchBox.current.focus();
+                    }, 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) {
+        if (prevProps.value !== this.props.value) {
+        }
+    }
+    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");
+        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)))));
+    }
+}
+exports.SearchBar = SearchBar;
+SearchBar.defaultProps = {
+    alignment: Alignment.Left,
+    enableGrouping: true,
+};
+//# sourceMappingURL=SearchBar.js.map

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

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

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

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/esm/core-react/index";
+
+.tree-widget-search-bar {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  // "..." group button
+  .search-bar-group-button2 {
+    opacity: 0;
+    display: none;
+    animation: hide ease-in 0.1s;
+    animation-fill-mode: forwards;
+
+    &.search-bar-group-button2.show {
+      animation: show ease-in 0.25s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+      display: block;
+    }
+  }
+
+  // button container
+  .search-bar-button-container {
+    display: flex;
+    align-items: center;
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  // 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;
+    &.show {
+      opacity: 1;
+    }
+  }
+
+  // search box container
+  .search-bar-search-container {
+    flex: 1;
+    height: 100%;
+    position: absolute;
+    left: 0;
+
+    .search-bar-search-box {
+      height: 32px;
+      float: right;
+      margin-right: 0;
+      box-sizing: border-box;
+      width: 0px;
+      visibility: hidden;
+      opacity: 0;
+      overflow: hidden;
+      transition: all 0.25s ease;
+
+      &.show {
+        visibility: visible;
+        opacity: 1;
+        width: 100%;
+      }
+    }
+
+    &.search-bar-grouping-enabled {
+      left: 32px;
+    }
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes hide {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}