@itwin/tree-widget-react 0.6.2 → 0.7.1

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

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

package/lib/esm/components/header/TreeHeader.scss

@@ -1,20 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
-
-.tree-widget-header-tree-search-bar {
-  margin-bottom: $uicore-s;
-}
-
-.tree-widget-header-tree-toolbar-icon {
-  color: $buic-icon-color;
-}
-
-.tree-widget-search-bar-button-container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  z-index: 1;
-}

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

@@ -1,50 +0,0 @@
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-import { RelativePosition } from "@itwin/appui-abstract";
-import "./Popup.scss";
-/** Properties for the [[Popup]] component */
-export interface PopupProps extends CommonProps {
-    /**  show or hide the box shadow */
-    showShadow: boolean;
-    /** show or hide the arrow */
-    showArrow: boolean;
-    /** indicate if the popup is shown or not */
-    isShown: boolean;
-    /** Direction (relative to the target) to which the popup is expanded */
-    position: RelativePosition;
-    /** Fixed position in the viewport */
-    fixedPosition?: {
-        top: number;
-        left: number;
-    };
-    /** target element */
-    context: HTMLElement | null;
-    /** Function called when the popup is opened */
-    onOpen?: () => void;
-    /** Function called when the popup is closed */
-    onClose?: () => void;
-}
-interface PopupState {
-    isShown: boolean;
-    position: RelativePosition;
-}
-/** Popup React component */
-export declare class Popup extends React.Component<PopupProps, PopupState> {
-    private _popupRef;
-    private _targetElement?;
-    constructor(props: PopupProps, context?: any);
-    static defaultProps: Partial<PopupProps>;
-    componentDidMount(): void;
-    componentDidUpdate(previousProps: PopupProps): void;
-    componentWillUnmount(): void;
-    private _onBodyClick;
-    private _onEsc;
-    private _onShow;
-    private _onClose;
-    private _getContext;
-    private getPositionClassName;
-    private getPositionWithinViewport;
-    render(): JSX.Element;
-}
-export {};
-//# sourceMappingURL=Popup.d.ts.map

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

@@ -1,220 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import * as React from "react";
-import classnames from "classnames";
-import { RelativePosition } from "@itwin/appui-abstract";
-import "./Popup.scss";
-/** Popup React component */
-export class Popup extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this._popupRef = React.createRef();
-        this._onBodyClick = (event) => {
-            const context = this._getContext();
-            // Ignore clicks on the popover or button
-            if (context === event.target) {
-                return;
-            }
-            if (context && context.contains(event.target)) {
-                return;
-            }
-            if (this._popupRef.current &&
-                (this._popupRef.current === event.target ||
-                    this._popupRef.current.contains(event.target))) {
-                return;
-            }
-            this._onClose();
-        };
-        this._onEsc = (event) => {
-            // Esc key
-            if (event.key === "Escape") {
-                this._onClose();
-            }
-        };
-        this._getContext = () => this.props.context || this._targetElement;
-        this.state = { isShown: this.props.isShown, position: this.props.position };
-    }
-    componentDidMount() {
-        const popupElement = this._popupRef.current;
-        if (popupElement && popupElement.parentElement) {
-            this._targetElement = popupElement.parentElement;
-        }
-    }
-    componentDidUpdate(previousProps) {
-        if (this.props.isShown === previousProps.isShown)
-            return;
-        if (this.props.isShown) {
-            this._onShow();
-        }
-        else {
-            this._onClose();
-        }
-    }
-    componentWillUnmount() {
-        document.body.removeEventListener("click", this._onBodyClick, false);
-        document.body.removeEventListener("keydown", this._onEsc, false);
-    }
-    _onShow() {
-        if (this.state.isShown) {
-            return;
-        }
-        document.addEventListener("click", this._onBodyClick, true);
-        document.addEventListener("keydown", this._onEsc, true);
-        const newPosition = this.getPositionWithinViewport();
-        this.setState({ position: newPosition, isShown: true }, () => {
-            if (this.props.onOpen)
-                this.props.onOpen();
-        });
-    }
-    _onClose() {
-        if (!this.state.isShown) {
-            return;
-        }
-        document.removeEventListener("click", this._onBodyClick, true);
-        document.removeEventListener("keydown", this._onEsc, true);
-        // eslint-disable-next-line @itwin/react-set-state-usage
-        this.setState({ isShown: false, position: this.props.position }, () => {
-            if (this.props.onClose)
-                this.props.onClose();
-        });
-    }
-    getPositionClassName(position) {
-        switch (position) {
-            case RelativePosition.TopLeft:
-                return classnames("tree-widget-search-popup-top-left");
-            case RelativePosition.TopRight:
-                return classnames("tree-widget-search-popup-top-right");
-            case RelativePosition.BottomLeft:
-                return classnames("tree-widget-search-popup-bottom-left");
-            case RelativePosition.BottomRight:
-                return classnames("tree-widget-search-popup-bottom-right");
-            case RelativePosition.Top:
-                return classnames("tree-widget-search-popup-top");
-            case RelativePosition.Left:
-                return classnames("tree-widget-search-popup-left");
-            case RelativePosition.Right:
-                return classnames("tree-widget-search-popup-right");
-            default:
-                return classnames("tree-widget-search-popup-bottom");
-        }
-    }
-    getPositionWithinViewport() {
-        const popupElement = this._popupRef.current;
-        if (!popupElement || !this._targetElement)
-            return this.props.position;
-        // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)
-        const viewportRect = {
-            left: window.scrollX,
-            top: window.scrollY,
-            right: window.scrollX + window.innerWidth,
-            bottom: window.scrollY + window.innerHeight,
-        };
-        const targetRect = this._targetElement.getBoundingClientRect();
-        const popupRect = popupElement.getBoundingClientRect();
-        const containerStyle = window.getComputedStyle(this._targetElement);
-        const offset = this.props.showArrow ? 12 : 4;
-        switch (this.props.position) {
-            case RelativePosition.BottomRight: {
-                const bottomMargin = containerStyle.marginBottom
-                    ? parseFloat(containerStyle.marginBottom)
-                    : 0;
-                if (targetRect.bottom + popupRect.height + bottomMargin + offset >
-                    viewportRect.bottom) {
-                    return RelativePosition.TopRight;
-                }
-                break;
-            }
-            case RelativePosition.TopRight: {
-                const topMargin = containerStyle.marginTop
-                    ? parseFloat(containerStyle.marginTop)
-                    : 0;
-                if (targetRect.top - popupRect.height - topMargin - offset <
-                    viewportRect.top) {
-                    return RelativePosition.BottomRight;
-                }
-                break;
-            }
-            case RelativePosition.TopLeft: {
-                const topMargin = containerStyle.marginTop
-                    ? parseFloat(containerStyle.marginTop)
-                    : 0;
-                if (targetRect.top - popupRect.height - topMargin - offset <
-                    viewportRect.top) {
-                    return RelativePosition.BottomLeft;
-                }
-                break;
-            }
-            case RelativePosition.BottomLeft: {
-                const bottomMargin = containerStyle.marginBottom
-                    ? parseFloat(containerStyle.marginBottom)
-                    : 0;
-                if (targetRect.bottom + popupRect.height + bottomMargin + offset >
-                    viewportRect.bottom) {
-                    return RelativePosition.TopLeft;
-                }
-                break;
-            }
-            case RelativePosition.Bottom: {
-                const bottomMargin = containerStyle.marginBottom
-                    ? parseFloat(containerStyle.marginBottom)
-                    : 0;
-                if (targetRect.bottom + popupRect.height + bottomMargin + offset >
-                    viewportRect.bottom) {
-                    return RelativePosition.Top;
-                }
-                break;
-            }
-            case RelativePosition.Top: {
-                const topMargin = containerStyle.marginTop
-                    ? parseFloat(containerStyle.marginTop)
-                    : 0;
-                if (targetRect.top - popupRect.height - topMargin - offset <
-                    viewportRect.top) {
-                    return RelativePosition.Bottom;
-                }
-                break;
-            }
-            case RelativePosition.Left: {
-                const leftMargin = containerStyle.marginLeft
-                    ? parseFloat(containerStyle.marginLeft)
-                    : 0;
-                if (targetRect.left - popupRect.width - leftMargin - offset <
-                    viewportRect.left) {
-                    return RelativePosition.Right;
-                }
-                break;
-            }
-            case RelativePosition.Right: {
-                const rightMargin = containerStyle.marginRight
-                    ? parseFloat(containerStyle.marginRight)
-                    : 0;
-                if (targetRect.right + popupRect.width + rightMargin + offset >
-                    viewportRect.right) {
-                    return RelativePosition.Left;
-                }
-                break;
-            }
-        }
-        return this.props.position;
-    }
-    render() {
-        const className = classnames("tree-widget-search-popup", this.getPositionClassName(this.state.position), this.props.showShadow && "tree-widget-search-popup-shadow", this.state.isShown && "visible", this.props.showArrow && "arrow", this.props.className);
-        let style;
-        if (this.props.fixedPosition) {
-            style = {
-                top: this.props.fixedPosition.top,
-                left: this.props.fixedPosition.left,
-                position: "fixed",
-            };
-        }
-        return (React.createElement("div", { style: style, className: className, ref: this._popupRef }, this.props.children));
-    }
-}
-Popup.defaultProps = {
-    position: RelativePosition.Bottom,
-    showShadow: true,
-    showArrow: false,
-};
-//# sourceMappingURL=Popup.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../src/components/search-bar/Popup.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,cAAc,CAAC;AAkCtB,4BAA4B;AAC5B,MAAM,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAiC;IAIhE,YAAY,KAAiB,EAAE,OAAa;QAC1C,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAJhB,cAAS,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAqC9C,iBAAY,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACjD,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnC,yCAAyC;YACzC,IAAI,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;gBAC5B,OAAO;aACR;YAED,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBACrD,OAAO;aACR;YAED,IACE,IAAI,CAAC,SAAS,CAAC,OAAO;gBACtB,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM;oBACtC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC,EACxD;gBACA,OAAO;aACR;YAED,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC;QAEM,WAAM,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC9C,UAAU;YACV,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;QACH,CAAC,CAAC;QA8BM,gBAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC;QAzFpE,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC9E,CAAC;IAQM,iBAAiB;QACtB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;QAC5C,IAAI,YAAY,IAAI,YAAY,CAAC,aAAa,EAAE;YAC9C,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,aAAa,CAAC;SAClD;IACH,CAAC;IAEM,kBAAkB,CAAC,aAAyB;QACjD,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,aAAa,CAAC,OAAO;YAAE,OAAO;QAEzD,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YACtB,IAAI,CAAC,OAAO,EAAE,CAAC;SAChB;aAAM;YACL,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;IACH,CAAC;IAEM,oBAAoB;QACzB,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACrE,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC;IAgCO,OAAO;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YACtB,OAAO;SACR;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAExD,MAAM,WAAW,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACrD,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE;YAC3D,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;gBAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YACvB,OAAO;SACR;QAED,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAE3D,wDAAwD;QACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE;YACpE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;gBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC;IAIO,oBAAoB,CAAC,QAA0B;QACrD,QAAQ,QAAQ,EAAE;YAChB,KAAK,gBAAgB,CAAC,OAAO;gBAC3B,OAAO,UAAU,CAAC,mCAAmC,CAAC,CAAC;YACzD,KAAK,gBAAgB,CAAC,QAAQ;gBAC5B,OAAO,UAAU,CAAC,oCAAoC,CAAC,CAAC;YAC1D,KAAK,gBAAgB,CAAC,UAAU;gBAC9B,OAAO,UAAU,CAAC,sCAAsC,CAAC,CAAC;YAC5D,KAAK,gBAAgB,CAAC,WAAW;gBAC/B,OAAO,UAAU,CAAC,uCAAuC,CAAC,CAAC;YAC7D,KAAK,gBAAgB,CAAC,GAAG;gBACvB,OAAO,UAAU,CAAC,8BAA8B,CAAC,CAAC;YACpD,KAAK,gBAAgB,CAAC,IAAI;gBACxB,OAAO,UAAU,CAAC,+BAA+B,CAAC,CAAC;YACrD,KAAK,gBAAgB,CAAC,KAAK;gBACzB,OAAO,UAAU,CAAC,gCAAgC,CAAC,CAAC;YACtD;gBACE,OAAO,UAAU,CAAC,iCAAiC,CAAC,CAAC;SACxD;IACH,CAAC;IAEO,yBAAyB;QAC/B,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;QAE5C,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtE,qGAAqG;QACrG,MAAM,YAAY,GAAS;YACzB,IAAI,EAAE,MAAM,CAAC,OAAO;YACpB,GAAG,EAAE,MAAM,CAAC,OAAO;YACnB,KAAK,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU;YACzC,MAAM,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW;SAC5C,CAAC;QACF,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAC/D,MAAM,SAAS,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;QACvD,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACpE,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7C,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC3B,KAAK,gBAAgB,CAAC,WAAW,CAAC,CAAC;gBACjC,MAAM,YAAY,GAAG,cAAc,CAAC,YAAY;oBAC9C,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC;oBACzC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,YAAY,GAAG,MAAM;oBAC5D,YAAY,CAAC,MAAM,EACnB;oBACA,OAAO,gBAAgB,CAAC,QAAQ,CAAC;iBAClC;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,QAAQ,CAAC,CAAC;gBAC9B,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS;oBACxC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC;oBACtC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,MAAM;oBACtD,YAAY,CAAC,GAAG,EAChB;oBACA,OAAO,gBAAgB,CAAC,WAAW,CAAC;iBACrC;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,OAAO,CAAC,CAAC;gBAC7B,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS;oBACxC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC;oBACtC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,MAAM;oBACtD,YAAY,CAAC,GAAG,EAChB;oBACA,OAAO,gBAAgB,CAAC,UAAU,CAAC;iBACpC;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,UAAU,CAAC,CAAC;gBAChC,MAAM,YAAY,GAAG,cAAc,CAAC,YAAY;oBAC9C,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC;oBACzC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,YAAY,GAAG,MAAM;oBAC5D,YAAY,CAAC,MAAM,EACnB;oBACA,OAAO,gBAAgB,CAAC,OAAO,CAAC;iBACjC;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,MAAM,CAAC,CAAC;gBAC5B,MAAM,YAAY,GAAG,cAAc,CAAC,YAAY;oBAC9C,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC;oBACzC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,YAAY,GAAG,MAAM;oBAC5D,YAAY,CAAC,MAAM,EACnB;oBACA,OAAO,gBAAgB,CAAC,GAAG,CAAC;iBAC7B;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,GAAG,CAAC,CAAC;gBACzB,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS;oBACxC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC;oBACtC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,MAAM;oBACtD,YAAY,CAAC,GAAG,EAChB;oBACA,OAAO,gBAAgB,CAAC,MAAM,CAAC;iBAChC;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBAC1B,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU;oBAC1C,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC;oBACvC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,UAAU,GAAG,MAAM;oBACvD,YAAY,CAAC,IAAI,EACjB;oBACA,OAAO,gBAAgB,CAAC,KAAK,CAAC;iBAC/B;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAC3B,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW;oBAC5C,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAC;oBACxC,CAAC,CAAC,CAAC,CAAC;gBACN,IACE,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,WAAW,GAAG,MAAM;oBACzD,YAAY,CAAC,KAAK,EAClB;oBACA,OAAO,gBAAgB,CAAC,IAAI,CAAC;iBAC9B;gBACD,MAAM;aACP;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;IAEM,MAAM;QACX,MAAM,SAAS,GAAG,UAAU,CAC1B,0BAA0B,EAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAC9C,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,iCAAiC,EAC1D,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS,EAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,OAAO,EAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,IAAI,KAAsC,CAAC;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;YAC5B,KAAK,GAAG;gBACN,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG;gBACjC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI;gBACnC,QAAQ,EAAE,OAAO;aAClB,CAAC;SACH;QAED,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,IACzD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;;AAlQa,kBAAY,GAAwB;IAChD,QAAQ,EAAE,gBAAgB,CAAC,MAAM;IACjC,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport \"./Popup.scss\";\n\n/** Properties for the [[Popup]] component */\nexport interface PopupProps extends CommonProps {\n  /**  show or hide the box shadow */\n  showShadow: boolean;\n  /** show or hide the arrow */\n  showArrow: boolean;\n  /** indicate if the popup is shown or not */\n  isShown: boolean;\n  /** Direction (relative to the target) to which the popup is expanded */\n  position: RelativePosition;\n  /** Fixed position in the viewport */\n  fixedPosition?: { top: number, left: number };\n  /** target element */\n  context: HTMLElement | null;\n  /** Function called when the popup is opened */\n  onOpen?: () => void;\n  /** Function called when the popup is closed */\n  onClose?: () => void;\n}\n\ninterface PopupState {\n  isShown: boolean;\n  position: RelativePosition;\n}\n\ninterface Rect {\n  left: number;\n  top: number;\n  right: number;\n  bottom: number;\n}\n\n/** Popup React component */\nexport class Popup extends React.Component<PopupProps, PopupState> {\n  private _popupRef = React.createRef<HTMLDivElement>();\n  private _targetElement?: HTMLElement; // target element owning the popup\n\n  constructor(props: PopupProps, context?: any) {\n    super(props, context);\n\n    this.state = { isShown: this.props.isShown, position: this.props.position };\n  }\n\n  public static defaultProps: Partial<PopupProps> = {\n    position: RelativePosition.Bottom,\n    showShadow: true,\n    showArrow: false,\n  };\n\n  public componentDidMount() {\n    const popupElement = this._popupRef.current;\n    if (popupElement && popupElement.parentElement) {\n      this._targetElement = popupElement.parentElement;\n    }\n  }\n\n  public componentDidUpdate(previousProps: PopupProps) {\n    if (this.props.isShown === previousProps.isShown) return;\n\n    if (this.props.isShown) {\n      this._onShow();\n    } else {\n      this._onClose();\n    }\n  }\n\n  public componentWillUnmount() {\n    document.body.removeEventListener(\"click\", this._onBodyClick, false);\n    document.body.removeEventListener(\"keydown\", this._onEsc, false);\n  }\n\n  private _onBodyClick = (event: MouseEvent): void => {\n    const context = this._getContext();\n\n    // Ignore clicks on the popover or button\n    if (context === event.target) {\n      return;\n    }\n\n    if (context && context.contains(event.target as Node)) {\n      return;\n    }\n\n    if (\n      this._popupRef.current &&\n      (this._popupRef.current === event.target ||\n        this._popupRef.current.contains(event.target as Node))\n    ) {\n      return;\n    }\n\n    this._onClose();\n  };\n\n  private _onEsc = (event: KeyboardEvent): void => {\n    // Esc key\n    if (event.key === \"Escape\") {\n      this._onClose();\n    }\n  };\n\n  private _onShow() {\n    if (this.state.isShown) {\n      return;\n    }\n\n    document.addEventListener(\"click\", this._onBodyClick, true);\n    document.addEventListener(\"keydown\", this._onEsc, true);\n\n    const newPosition = this.getPositionWithinViewport();\n    this.setState({ position: newPosition, isShown: true }, () => {\n      if (this.props.onOpen) this.props.onOpen();\n    });\n  }\n\n  private _onClose() {\n    if (!this.state.isShown) {\n      return;\n    }\n\n    document.removeEventListener(\"click\", this._onBodyClick, true);\n    document.removeEventListener(\"keydown\", this._onEsc, true);\n\n    // eslint-disable-next-line @itwin/react-set-state-usage\n    this.setState({ isShown: false, position: this.props.position }, () => {\n      if (this.props.onClose) this.props.onClose();\n    });\n  }\n\n  private _getContext = () => this.props.context || this._targetElement;\n\n  private getPositionClassName(position: RelativePosition): string {\n    switch (position) {\n      case RelativePosition.TopLeft:\n        return classnames(\"tree-widget-search-popup-top-left\");\n      case RelativePosition.TopRight:\n        return classnames(\"tree-widget-search-popup-top-right\");\n      case RelativePosition.BottomLeft:\n        return classnames(\"tree-widget-search-popup-bottom-left\");\n      case RelativePosition.BottomRight:\n        return classnames(\"tree-widget-search-popup-bottom-right\");\n      case RelativePosition.Top:\n        return classnames(\"tree-widget-search-popup-top\");\n      case RelativePosition.Left:\n        return classnames(\"tree-widget-search-popup-left\");\n      case RelativePosition.Right:\n        return classnames(\"tree-widget-search-popup-right\");\n      default:\n        return classnames(\"tree-widget-search-popup-bottom\");\n    }\n  }\n\n  private getPositionWithinViewport(): RelativePosition {\n    const popupElement = this._popupRef.current;\n\n    if (!popupElement || !this._targetElement) return this.props.position;\n    // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)\n    const viewportRect: Rect = {\n      left: window.scrollX,\n      top: window.scrollY,\n      right: window.scrollX + window.innerWidth,\n      bottom: window.scrollY + window.innerHeight,\n    };\n    const targetRect = this._targetElement.getBoundingClientRect();\n    const popupRect = popupElement.getBoundingClientRect();\n    const containerStyle = window.getComputedStyle(this._targetElement);\n    const offset = this.props.showArrow ? 12 : 4;\n\n    switch (this.props.position) {\n      case RelativePosition.BottomRight: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.TopRight;\n        }\n        break;\n      }\n\n      case RelativePosition.TopRight: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.BottomRight;\n        }\n        break;\n      }\n\n      case RelativePosition.TopLeft: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.BottomLeft;\n        }\n        break;\n      }\n\n      case RelativePosition.BottomLeft: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.TopLeft;\n        }\n        break;\n      }\n\n      case RelativePosition.Bottom: {\n        const bottomMargin = containerStyle.marginBottom\n          ? parseFloat(containerStyle.marginBottom)\n          : 0;\n        if (\n          targetRect.bottom + popupRect.height + bottomMargin + offset >\n          viewportRect.bottom\n        ) {\n          return RelativePosition.Top;\n        }\n        break;\n      }\n\n      case RelativePosition.Top: {\n        const topMargin = containerStyle.marginTop\n          ? parseFloat(containerStyle.marginTop)\n          : 0;\n        if (\n          targetRect.top - popupRect.height - topMargin - offset <\n          viewportRect.top\n        ) {\n          return RelativePosition.Bottom;\n        }\n        break;\n      }\n\n      case RelativePosition.Left: {\n        const leftMargin = containerStyle.marginLeft\n          ? parseFloat(containerStyle.marginLeft)\n          : 0;\n        if (\n          targetRect.left - popupRect.width - leftMargin - offset <\n          viewportRect.left\n        ) {\n          return RelativePosition.Right;\n        }\n        break;\n      }\n\n      case RelativePosition.Right: {\n        const rightMargin = containerStyle.marginRight\n          ? parseFloat(containerStyle.marginRight)\n          : 0;\n        if (\n          targetRect.right + popupRect.width + rightMargin + offset >\n          viewportRect.right\n        ) {\n          return RelativePosition.Left;\n        }\n        break;\n      }\n    }\n\n    return this.props.position;\n  }\n\n  public render(): JSX.Element {\n    const className = classnames(\n      \"tree-widget-search-popup\",\n      this.getPositionClassName(this.state.position),\n      this.props.showShadow && \"tree-widget-search-popup-shadow\",\n      this.state.isShown && \"visible\",\n      this.props.showArrow && \"arrow\",\n      this.props.className\n    );\n\n    let style: React.CSSProperties | undefined;\n    if (this.props.fixedPosition) {\n      style = {\n        top: this.props.fixedPosition.top,\n        left: this.props.fixedPosition.left,\n        position: \"fixed\",\n      };\n    }\n\n    return (\n      <div style={style} className={className} ref={this._popupRef}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,316 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
-
-.tree-widget-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);
-  }
-}