@itwin/tree-widget-react 0.10.0 → 1.0.0-dev.1

package/lib/esm/components/rulesets/ClassificationSystems.json

@@ -1,122 +0,0 @@
-{
-    "id": "tree-widget-react/ClassificationSystems",
-    "rules": [
-        {
-            "ruleType": "RootNodes",
-            "specifications": [
-                {
-                    "specType": "InstanceNodesOfSpecificClasses",
-                    "classes": [
-                        {
-                            "schemaName": "ClassificationSystems",
-                            "classNames": [
-                                "ClassificationSystem"
-                            ]
-                        }
-                    ],
-                    "arePolymorphic": false,
-                    "groupByClass": false,
-                    "groupByLabel": false
-                }
-            ]
-        },
-        {
-            "ruleType": "ChildNodes",
-            "condition": "ParentNode.IsOfClass(\"ClassificationSystem\", \"ClassificationSystems\")",
-            "specifications": [
-                {
-                    "specType": "RelatedInstanceNodes",
-                    "relationships": {
-                        "schemaName": "ClassificationSystems",
-                        "classNames": [
-                            "ClassificationSystemOwnsClassificationTable"
-                        ]
-                    },
-                    "relatedClasses": {
-                        "schemaName": "ClassificationSystems",
-                        "classNames": [
-                            "ClassificationTable"
-                        ]
-                    },
-                    "requiredDirection": "Forward",
-                    "groupByClass": false,
-                    "groupByLabel": false,
-                    "doNotSort": true
-                }
-            ]
-        },
-        {
-            "ruleType": "ChildNodes",
-            "condition": "ParentNode.IsOfClass(\"ClassificationTable\", \"ClassificationSystems\")",
-            "specifications": [
-                {
-                    "specType": "RelatedInstanceNodes",
-                    "relationships": {
-                        "schemaName": "BisCore",
-                        "classNames": [
-                            "ModelModelsElement"
-                        ]
-                    },
-                    "relatedClasses": {
-                        "schemaName": "BisCore",
-                        "classNames": [
-                            "Model"
-                        ]
-                    },
-                    "requiredDirection": "Backward",
-                    "groupByClass": false,
-                    "groupByLabel": false,
-                    "hideNodesInHierarchy": true
-                }
-            ]
-        },
-        {
-            "ruleType": "ChildNodes",
-            "condition": "ParentNode.IsOfClass(\"Model\", \"BisCore\")",
-            "specifications": [
-                {
-                    "specType": "RelatedInstanceNodes",
-                    "relationships": {
-                        "schemaName": "BisCore",
-                        "classNames": [
-                            "ModelContainsElements"
-                        ]
-                    },
-                    "relatedClasses": {
-                        "schemaName": "ClassificationSystems",
-                        "classNames": [
-                            "Classification"
-                        ]
-                    },
-                    "requiredDirection": "Forward",
-                    "groupByClass": false,
-                    "groupByLabel": false
-                }
-            ]
-        },
-        {
-            "ruleType": "ChildNodes",
-            "condition": "ParentNode.IsOfClass(\"Classification\", \"ClassificationSystems\")",
-            "specifications": [
-                {
-                    "specType": "RelatedInstanceNodes",
-                    "relationships": {
-                        "schemaName": "ClassificationSystems",
-                        "classNames": [
-                            "ElementHasClassifications"
-                        ]
-                    },
-                    "relatedClasses": {
-                        "schemaName": "BisCore",
-                        "classNames": [
-                            "Element"
-                        ]
-                    },
-                    "requiredDirection": "Backward",
-                    "groupByClass": false,
-                    "groupByLabel": false
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,48 +0,0 @@
-import * as React from "react";
-import type { 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 */
-    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 _searchBox;
-    static defaultProps: Partial<SearchBarProps>;
-    constructor(props: any);
-    componentDidUpdate(prevProps: SearchBarProps): Promise<void>;
-    private _onToggleSearch;
-    render(): JSX.Element;
-}
-export {};
-//# sourceMappingURL=SearchBar.d.ts.map

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

@@ -1,60 +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 { SearchBox } from "./SearchBox";
-import "./SearchBar.scss";
-import { ButtonGroup, DropdownMenu, IconButton, MenuItem, } from "@itwin/itwinui-react";
-import { SvgMore, SvgSearch } from "@itwin/itwinui-icons-react";
-export var Alignment;
-(function (Alignment) {
-    Alignment[Alignment["Left"] = 0] = "Left";
-    Alignment[Alignment["Right"] = 1] = "Right";
-})(Alignment || (Alignment = {}));
-/** SearchBox with expanding search box capability */
-export class SearchBar extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        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.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 } = this.state;
-        const classes = classnames("tree-widget-search-bar", this.props.className);
-        const searchBoxClassName = classnames("search-bar-search-box", showSearch && "show");
-        const searchIconClassName = classnames("search-bar-search-icon", showSearch ? "hide" : "show");
-        const contentClassName = classnames("search-bar-button-container", showSearch && "contracted", alignment === Alignment.Right && "right");
-        return (React.createElement("div", { className: classes },
-            enableGrouping && React.createElement("div", { className: contentClassName },
-                React.createElement(ButtonGroup, { overflowButton: (overflowStart) => (React.createElement(DropdownMenu, { menuItems: () => React.Children.toArray(this.props.children)
-                            .slice(overflowStart === 0 ? 0 : overflowStart - 1)
-                            .map((btn, index) => React.createElement(MenuItem, { key: index, className: "search-bar-dropdown-menu-item" }, btn)), className: "search-bar-dropdown-container" },
-                        React.createElement(IconButton, { styleType: "borderless", size: "small" },
-                            React.createElement(SvgMore, null)))) }, this.props.children)),
-            showSearch ? (React.createElement("div", { className: "search-bar-search-container" },
-                React.createElement(SearchBox, { ref: this._searchBox, className: searchBoxClassName, searchText: value, valueChangedDelay: valueChangedDelay, placeholder: placeholder, onClear: this.props.onFilterClear, onFilterStart: this.props.onFilterStart, resultCount: this.props.resultCount, onIconClick: this._onToggleSearch, onSelectedChanged: this.props.onSelectedChanged }))) : (React.createElement(IconButton, { className: searchIconClassName, onClick: this._onToggleSearch, title: title, styleType: "borderless", size: "small" },
-                React.createElement(SvgSearch, null)))));
-    }
-}
-SearchBar.defaultProps = {
-    alignment: Alignment.Right,
-    enableGrouping: true,
-};
-//# sourceMappingURL=SearchBar.js.map

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

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

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

@@ -1,118 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-// Buttons dropdown container
-.search-bar-dropdown-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: calc(var(--iui-size-2xs) + var(--iui-size-3xs));
-
-  .search-bar-dropdown-menu-item {
-    width: 100%;
-    padding: 0;
-
-    >.iui-content {
-      height: calc(var(--iui-size-xl) + var(--iui-size-2xs));
-
-      >.iui-menu-label {
-        height: 100%;
-
-        >.iui-button {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-  .search-bar-dropdown-menu-item:hover {
-    background-color: transparent;
-    cursor: default;
-  }
-}
-
-.tree-widget-header-tree-toolbar-icon {
-  border: 0;
-  padding: 0 calc(var(--iui-size-2xs) + var(--iui-size-3xs));
-}
-
-.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% - var(--iui-size-l));
-
-    &.right {
-      justify-content: flex-end;
-    }
-
-    &.contracted {
-      width: var(--iui-size-xl);
-    }
-  }
-
-  // override of the search box styling
-  .search-bar-search-icon {
-    opacity: 0;
-    transition: all 0.2s ease;
-    color: var(--iui-color-text);
-    height: var(--iui-size-xl);
-
-    &.show {
-      opacity: 1;
-    }
-  }
-
-  // search box container
-  .search-bar-search-container {
-    flex: 1;
-    height: 100%;
-
-    .search-bar-search-box {
-      height: var(--iui-size-xl);
-      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%;
-      }
-    }
-  }
-}
-
-@keyframes show {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes hide {
-  0% {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  100% {
-    opacity: 0;
-    visibility: hidden;
-  }
-}

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

@@ -1,70 +0,0 @@
-/** @module SearchBox */
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-import "./SearchBox.scss";
-export interface SearchBoxProps extends CommonProps {
-    /** value to set SearchBox */
-    searchText?: string;
-    /** placeholder value to show in gray before anything is entered in */
-    placeholder?: string;
-    /** frequency to poll for changes in value */
-    valueChangedDelay?: number;
-    /** listens for <Enter> keypress */
-    onEnterPressed?: () => void;
-    /** listens for <Esc> keypress */
-    onEscPressed?: () => void;
-    /** listens for onClick event for Clear (x) icon */
-    onClear?: () => void;
-    /** Search or clear icon click */
-    onIconClick?: () => void;
-    /** Filtering is cleared after everything's loaded */
-    onFilterStart: (newFilter: string) => void;
-    /** Tells the component if parent component is still handling the filtering */
-    filteringInProgress?: boolean;
-    /** Total number of results/entries */
-    resultCount: number;
-    /** Callback to currently selected result/entry change */
-    onSelectedChanged: (index: number) => void;
-}
-/**
- * Enumeration of possible component contexts
- * @internal
- */
-export declare enum InputContext {
-    /** Component is ready to filter */
-    ReadyToFilter = 0,
-    /** Component's parent is currently filtering */
-    FilteringInProgress = 1,
-    /** Component's parent has finished filtering */
-    FilteringFinished = 2,
-    /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */
-    FilteringFinishedWithNoStepping = 3
-}
-interface SearchBoxState {
-    searchText?: string;
-    /** @internal */
-    context: InputContext;
-    /** Currently selected index */
-    selectedIndex: number;
-}
-export declare class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxState> {
-    private _inputElement;
-    private _timeoutId;
-    constructor(props: SearchBoxProps);
-    focus(): void;
-    private _trackChange;
-    private _handleKeyDown;
-    private _handleIconClick;
-    private _unsetTimeout;
-    componentDidUpdate(prevProps: SearchBoxProps): Promise<void>;
-    componentWillUnmount(): void;
-    /** @internal */
-    static getDerivedStateFromProps(props: SearchBoxProps, state: SearchBoxState): {
-        context: InputContext;
-    } | null;
-    private _onPrevClick;
-    private _onNextClick;
-    render(): JSX.Element;
-}
-export {};
-//# sourceMappingURL=SearchBox.d.ts.map

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

@@ -1,160 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @module SearchBox */
-import * as React from "react";
-import classnames from "classnames";
-import { SvgChevronDown, SvgChevronUp, SvgCloseSmall } from "@itwin/itwinui-icons-react";
-import { IconButton } from "@itwin/itwinui-react";
-import "./SearchBox.scss";
-import { TreeWidget } from "../../TreeWidget";
-/**
- * Enumeration of possible component contexts
- * @internal
- */
-export var InputContext;
-(function (InputContext) {
-    /** Component is ready to filter */
-    InputContext[InputContext["ReadyToFilter"] = 0] = "ReadyToFilter";
-    /** Component's parent is currently filtering */
-    InputContext[InputContext["FilteringInProgress"] = 1] = "FilteringInProgress";
-    /** Component's parent has finished filtering */
-    InputContext[InputContext["FilteringFinished"] = 2] = "FilteringFinished";
-    /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */
-    InputContext[InputContext["FilteringFinishedWithNoStepping"] = 3] = "FilteringFinishedWithNoStepping";
-})(InputContext || (InputContext = {}));
-export class SearchBox extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._inputElement = null;
-        this._timeoutId = 0;
-        this._trackChange = (_event) => {
-            let searchText = "";
-            // istanbul ignore else
-            if (this._inputElement)
-                searchText = this._inputElement.value;
-            this.setState((_prevState) => {
-                return { searchText };
-            }, () => {
-                if (this.props.valueChangedDelay) {
-                    this._unsetTimeout();
-                    this._timeoutId = window.setTimeout(() => {
-                        this.setState({
-                            context: InputContext.ReadyToFilter,
-                            selectedIndex: 0,
-                        });
-                        this.props.onSelectedChanged(0);
-                        this.props.onFilterStart(this.state.searchText);
-                    }, this.props.valueChangedDelay);
-                }
-                else {
-                    this.setState({ context: InputContext.ReadyToFilter });
-                    this.props.onFilterStart(this.state.searchText);
-                }
-            });
-        };
-        this._handleKeyDown = (e) => {
-            switch (e.key) {
-                case "Escape":
-                    // istanbul ignore else
-                    if (this.props.onEscPressed)
-                        this.props.onEscPressed();
-                    break;
-                case "Enter":
-                    // istanbul ignore else
-                    if (this.props.onEnterPressed)
-                        this.props.onEnterPressed();
-                    break;
-            }
-        };
-        this._handleIconClick = () => {
-            // istanbul ignore else
-            if (this._inputElement) {
-                const clear = this.state.searchText !== "";
-                this._inputElement.value = "";
-                // istanbul ignore else
-                if (clear && this.props.onClear)
-                    this.props.onClear();
-                this._inputElement.focus();
-            }
-            this._trackChange();
-            if (this.props.onIconClick)
-                this.props.onIconClick();
-        };
-        this._unsetTimeout = () => {
-            if (this._timeoutId) {
-                window.clearTimeout(this._timeoutId);
-                this._timeoutId = 0;
-            }
-        };
-        this._onPrevClick = () => {
-            if (this.state.selectedIndex > 1) {
-                this.props.onSelectedChanged(this.state.selectedIndex - 1);
-                this.setState((state) => ({ selectedIndex: state.selectedIndex - 1 }));
-            }
-        };
-        this._onNextClick = () => {
-            if (this.state.selectedIndex < this.props.resultCount) {
-                this.props.onSelectedChanged(this.state.selectedIndex + 1);
-                this.setState((state) => ({ selectedIndex: state.selectedIndex + 1 }));
-            }
-        };
-        this.state = {
-            searchText: this.props.searchText,
-            context: InputContext.ReadyToFilter,
-            selectedIndex: 0,
-        };
-    }
-    focus() {
-        // istanbul ignore else
-        if (this._inputElement) {
-            this._inputElement.focus();
-        }
-    }
-    async componentDidUpdate(prevProps) {
-        if (prevProps.searchText !== this.props.searchText) {
-            const searchText = this.props.searchText;
-            this.setState({ searchText });
-        }
-        this.focus();
-    }
-    componentWillUnmount() {
-        this._unsetTimeout();
-    }
-    /** @internal */
-    static getDerivedStateFromProps(props, state) {
-        if (state.context === InputContext.FilteringInProgress &&
-            !props.filteringInProgress) {
-            if (state.searchText)
-                return { context: InputContext.FilteringFinished };
-            else
-                return { context: InputContext.FilteringFinishedWithNoStepping };
-        }
-        else if (state.context === InputContext.ReadyToFilter &&
-            props.filteringInProgress) {
-            return { context: InputContext.FilteringInProgress };
-        }
-        return null;
-    }
-    render() {
-        const { className, style, resultCount, placeholder, } = this.props;
-        const { searchText, selectedIndex } = this.state;
-        const searchClassName = classnames("tree-widget-searchbox", className);
-        const showCount = resultCount > 0;
-        return (React.createElement("div", { className: searchClassName, style: style },
-            React.createElement("input", { value: searchText, ref: (el) => {
-                    this._inputElement = el;
-                }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: placeholder ? placeholder : TreeWidget.translate("searchbox.search") }),
-            React.createElement("div", { className: "searchbox-stepping-container" },
-                showCount && (React.createElement("span", { className: "searchbox-stepping-count" }, `${selectedIndex}/${resultCount}`)),
-                React.createElement("div", { className: "searchbox-separator" }),
-                React.createElement(IconButton, { size: "small", styleType: "borderless", onClick: this._onPrevClick, title: "Previous" },
-                    React.createElement(SvgChevronUp, null)),
-                React.createElement(IconButton, { size: "small", styleType: "borderless", onClick: this._onNextClick, title: "Next" },
-                    React.createElement(SvgChevronDown, null))),
-            React.createElement(IconButton, { size: "small", styleType: "borderless", onClick: this._handleIconClick, onKeyDown: this._handleIconClick },
-                React.createElement(SvgCloseSmall, null))));
-    }
-}
-//# sourceMappingURL=SearchBox.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @module SearchBox */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { SvgChevronDown, SvgChevronUp, SvgCloseSmall } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport \"./SearchBox.scss\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nexport interface SearchBoxProps extends CommonProps {\n  /** value to set SearchBox */\n  searchText?: string;\n  /** placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** frequency to poll for changes in value */\n  valueChangedDelay?: number;\n  /** listens for <Enter> keypress */\n  onEnterPressed?: () => void;\n  /** listens for <Esc> keypress */\n  onEscPressed?: () => void;\n  /** listens for onClick event for Clear (x) icon */\n  onClear?: () => void;\n  /** Search or clear icon click */\n  onIconClick?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\n/**\n * Enumeration of possible component contexts\n * @internal\n */\nexport enum InputContext {\n  /** Component is ready to filter */\n  ReadyToFilter,\n  /** Component's parent is currently filtering */\n  FilteringInProgress,\n  /** Component's parent has finished filtering */\n  FilteringFinished,\n  /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */\n  FilteringFinishedWithNoStepping,\n}\n\ninterface SearchBoxState {\n  searchText?: string;\n  /** @internal */\n  context: InputContext;\n  /** Currently selected index */\n  selectedIndex: number;\n}\n\nexport class SearchBox extends React.PureComponent<\nSearchBoxProps,\nSearchBoxState\n> {\n  private _inputElement: HTMLInputElement | null = null;\n  private _timeoutId: number = 0;\n\n  constructor(props: SearchBoxProps) {\n    super(props);\n\n    this.state = {\n      searchText: this.props.searchText,\n      context: InputContext.ReadyToFilter,\n      selectedIndex: 0,\n    };\n  }\n\n  public focus() {\n    // istanbul ignore else\n    if (this._inputElement) {\n      this._inputElement.focus();\n    }\n  }\n\n  private _trackChange = (_event?: any): void => {\n    let searchText = \"\";\n\n    // istanbul ignore else\n    if (this._inputElement) searchText = this._inputElement.value;\n\n    this.setState(\n      (_prevState) => {\n        return { searchText };\n      },\n      () => {\n        if (this.props.valueChangedDelay) {\n          this._unsetTimeout();\n          this._timeoutId = window.setTimeout(() => {\n            this.setState({\n              context: InputContext.ReadyToFilter,\n              selectedIndex: 0,\n            });\n            this.props.onSelectedChanged(0);\n            this.props.onFilterStart(this.state.searchText!);\n          }, this.props.valueChangedDelay);\n        } else {\n          this.setState({ context: InputContext.ReadyToFilter });\n          this.props.onFilterStart(this.state.searchText!);\n        }\n      }\n    );\n  };\n\n  private _handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        // istanbul ignore else\n        if (this.props.onEscPressed) this.props.onEscPressed();\n        break;\n      case \"Enter\":\n        // istanbul ignore else\n        if (this.props.onEnterPressed) this.props.onEnterPressed();\n        break;\n    }\n  };\n\n  private _handleIconClick = (): void => {\n    // istanbul ignore else\n    if (this._inputElement) {\n      const clear = this.state.searchText !== \"\";\n      this._inputElement.value = \"\";\n      // istanbul ignore else\n      if (clear && this.props.onClear) this.props.onClear();\n      this._inputElement.focus();\n    }\n    this._trackChange();\n    if (this.props.onIconClick) this.props.onIconClick();\n  };\n\n  private _unsetTimeout = (): void => {\n    if (this._timeoutId) {\n      window.clearTimeout(this._timeoutId);\n      this._timeoutId = 0;\n    }\n  };\n\n  public async componentDidUpdate(prevProps: SearchBoxProps) {\n    if (prevProps.searchText !== this.props.searchText) {\n      const searchText = this.props.searchText;\n      this.setState({ searchText });\n    }\n\n    this.focus();\n  }\n\n  public componentWillUnmount() {\n    this._unsetTimeout();\n  }\n\n  /** @internal */\n  public static getDerivedStateFromProps(\n    props: SearchBoxProps,\n    state: SearchBoxState\n  ) {\n    if (\n      state.context === InputContext.FilteringInProgress &&\n      !props.filteringInProgress\n    ) {\n      if (state.searchText) return { context: InputContext.FilteringFinished };\n      else return { context: InputContext.FilteringFinishedWithNoStepping };\n    } else if (\n      state.context === InputContext.ReadyToFilter &&\n      props.filteringInProgress\n    ) {\n      return { context: InputContext.FilteringInProgress };\n    }\n    return null;\n  }\n\n  private _onPrevClick = () => {\n    if (this.state.selectedIndex > 1) {\n      this.props.onSelectedChanged(this.state.selectedIndex - 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex - 1 }));\n    }\n  };\n\n  private _onNextClick = () => {\n    if (this.state.selectedIndex < this.props.resultCount) {\n      this.props.onSelectedChanged(this.state.selectedIndex + 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex + 1 }));\n    }\n  };\n\n  public render() {\n    const {\n      className,\n      style,\n      resultCount,\n      placeholder,\n    } = this.props;\n    const { searchText, selectedIndex } = this.state;\n    const searchClassName = classnames(\"tree-widget-searchbox\", className);\n    const showCount = resultCount > 0;\n\n    return (\n      <div className={searchClassName} style={style}>\n        <input\n          value={searchText}\n          ref={(el) => {\n            this._inputElement = el;\n          }}\n          onChange={this._trackChange}\n          onKeyDown={this._handleKeyDown}\n          onPaste={this._trackChange}\n          onCut={this._trackChange}\n          placeholder={\n            placeholder ? placeholder : TreeWidget.translate(\"searchbox.search\")\n          }\n        />\n        <div className=\"searchbox-stepping-container\">\n          {showCount && (\n            <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${resultCount}`}</span>\n          )}\n          <div className=\"searchbox-separator\" />\n          <IconButton\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={this._onPrevClick}\n            title=\"Previous\"\n          >\n            <SvgChevronUp />\n          </IconButton>\n          <IconButton\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={this._onNextClick}\n            title=\"Next\"\n          >\n            <SvgChevronDown />\n          </IconButton>\n        </div>\n        <IconButton\n          size=\"small\"\n          styleType=\"borderless\"\n          onClick={this._handleIconClick}\n          onKeyDown={this._handleIconClick}\n        >\n          <SvgCloseSmall />\n        </IconButton>\n      </div>\n    );\n  }\n}\n"]}