@itwin/core-react 3.6.0-dev.36 → 3.6.0-dev.40

package/lib/cjs/core-react/radio/Radio.js

@@ -1,28 +1,28 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Radio
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = void 0;
-const classnames_1 = require("classnames");
-const React = require("react");
-/** Basic radio input component is a wrapper for the `<input type="radio">` HTML element.
- * @public
- * @deprecated Use Radio in itwinui-react instead
- */
-class Radio extends React.PureComponent {
-    render() {
-        const { label, disabled, status, className, style, inputStyle, inputClassName, type, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
-        return (React.createElement("label", { style: style, className: (0, classnames_1.default)("uicore-inputs-radio", disabled && "core-disabled", status, className) },
-            label &&
-                React.createElement("span", null, label),
-            React.createElement("input", { type: "radio", className: inputClassName, style: inputStyle, disabled: disabled, ...props }),
-            React.createElement("span", { className: "core-radio-checkmark" })));
-    }
-}
-exports.Radio = Radio;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Radio
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Basic radio input component is a wrapper for the `<input type="radio">` HTML element.
+ * @public
+ * @deprecated Use Radio in itwinui-react instead
+ */
+class Radio extends React.PureComponent {
+    render() {
+        const { label, disabled, status, className, style, inputStyle, inputClassName, type, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        return (React.createElement("label", { style: style, className: (0, classnames_1.default)("uicore-inputs-radio", disabled && "core-disabled", status, className) },
+            label &&
+                React.createElement("span", null, label),
+            React.createElement("input", { type: "radio", className: inputClassName, style: inputStyle, disabled: disabled, ...props }),
+            React.createElement("span", { className: "core-radio-checkmark" })));
+    }
+}
+exports.Radio = Radio;
 //# sourceMappingURL=Radio.js.map

package/lib/cjs/core-react/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/core-react/radio/Radio.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAU/B;;;GAGG;AACH,MAAa,KAAM,SAAQ,KAAK,CAAC,aAAyB;IACxC,MAAM;QACpB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QAEtK,OAAO,CACL,+BAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,IAAA,oBAAU,EACxC,qBAAqB,EACrB,QAAQ,IAAI,eAAe,EAC3B,MAAM,EACN,SAAS,CACV;YACE,KAAK;gBACJ,kCAAO,KAAK,CAAQ;YAEtB,+BAAO,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,GAAI;YACrG,8BAAM,SAAS,EAAC,sBAAsB,GAAQ,CACxC,CACT,CAAC;IACJ,CAAC;CACF;AAnBD,sBAmBC","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/** @packageDocumentation\n * @module Radio\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { LabeledComponentProps } from \"../inputs/LabeledComponentProps\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[Radio]] component\n * @public\n * @deprecated Use RadioProps in itwinui-react instead\n */\nexport interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps, LabeledComponentProps { }\n\n/** Basic radio input component is a wrapper for the `<input type=\"radio\">` HTML element.\n * @public\n * @deprecated Use Radio in itwinui-react instead\n */\nexport class Radio extends React.PureComponent<RadioProps> {  // eslint-disable-line deprecation/deprecation\n  public override render(): JSX.Element {\n    const { label, disabled, status, className, style, inputStyle, inputClassName, type, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\n\n    return (\n      <label style={style} className={classnames(\n        \"uicore-inputs-radio\",\n        disabled && \"core-disabled\",\n        status,\n        className,\n      )}>\n        {label &&\n          <span>{label}</span>\n        }\n        <input type={\"radio\"} className={inputClassName} style={inputStyle} disabled={disabled} {...props} />\n        <span className=\"core-radio-checkmark\"></span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/core-react/radio/Radio.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAU/B;;;GAGG;AACH,MAAa,KAAM,SAAQ,KAAK,CAAC,aAAyB;IACxC,MAAM;QACpB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QAEtK,OAAO,CACL,+BAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,IAAA,oBAAU,EACxC,qBAAqB,EACrB,QAAQ,IAAI,eAAe,EAC3B,MAAM,EACN,SAAS,CACV;YACE,KAAK;gBACJ,kCAAO,KAAK,CAAQ;YAEtB,+BAAO,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,GAAI;YACrG,8BAAM,SAAS,EAAC,sBAAsB,GAAQ,CACxC,CACT,CAAC;IACJ,CAAC;CACF;AAnBD,sBAmBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Radio\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { LabeledComponentProps } from \"../inputs/LabeledComponentProps\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[Radio]] component\r\n * @public\r\n * @deprecated Use RadioProps in itwinui-react instead\r\n */\r\nexport interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps, LabeledComponentProps { }\r\n\r\n/** Basic radio input component is a wrapper for the `<input type=\"radio\">` HTML element.\r\n * @public\r\n * @deprecated Use Radio in itwinui-react instead\r\n */\r\nexport class Radio extends React.PureComponent<RadioProps> {  // eslint-disable-line deprecation/deprecation\r\n  public override render(): JSX.Element {\r\n    const { label, disabled, status, className, style, inputStyle, inputClassName, type, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n\r\n    return (\r\n      <label style={style} className={classnames(\r\n        \"uicore-inputs-radio\",\r\n        disabled && \"core-disabled\",\r\n        status,\r\n        className,\r\n      )}>\r\n        {label &&\r\n          <span>{label}</span>\r\n        }\r\n        <input type={\"radio\"} className={inputClassName} style={inputStyle} disabled={disabled} {...props} />\r\n        <span className=\"core-radio-checkmark\"></span>\r\n      </label>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/radio/classes.scss

@@ -1,7 +1,7 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./index";
-
-.uicore-inputs-radio { @include uicore-inputs-radio; }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-inputs-radio { @include uicore-inputs-radio; }

package/lib/cjs/core-react/radio/index.scss

@@ -1,8 +1,8 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-
-@import "../inputs/variables";
-@import "./radio";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+
+@import "../inputs/variables";
+@import "./radio";

package/lib/cjs/core-react/radio/radio.scss

@@ -1,89 +1,89 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-@import "~@itwin/itwinui-css/scss/style/space";
-@import "~@itwin/itwinui-css/scss/style/speed";
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-@mixin uicore-inputs-radio {
-
-  display: block;
-  position: relative;
-  padding-left: $iui-l;
-  font-size: $iui-font-size;
-  cursor: pointer;
-  user-select: none;
-  color: $buic-foreground-body;
-  min-height: 1.57em;
-
-  > input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    cursor: pointer;
-  }
-
-  .core-radio-checkmark {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    height: 1em;
-    width: 1em;
-    border: 1px solid $buic-foreground-disabled;
-    background-color: $buic-background-control;
-    border-radius: 50%;
-  }
-
-  &:hover:not(.core-disabled) input ~ .core-radio-checkmark {
-    border-color:     $buic-foreground-activehover;
-    transition:       all $iui-speed-fast ease-out;
-  }
-
-  & input:checked ~ .core-radio-checkmark {
-    border-color:     $buic-foreground-muted;
-  }
-
-  & input:active ~ .core-radio-checkmark,
-  & input:focus ~ .core-radio-checkmark {
-    border-color:     $buic-foreground-focus-border;
-    box-shadow:       $uicore-inputs-focus-boxshadow;
-  }
-
-  .core-radio-checkmark::after {
-    content: '';
-    position: absolute;
-    display: none;
-  }
-
-  & input:checked ~ .core-radio-checkmark::after {
-    display: block;
-  }
-
-  & .core-radio-checkmark::after {
-    top: 3px;
-    left: 3px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: $buic-foreground-primary;
-  }
-
-  &.core-disabled {
-    opacity: $uicore-opacity-disabled;
-    cursor: not-allowed;
-  }
-
-  &.success {
-    color: $buic-foreground-success;
-  }
-
-  &.warning {
-    color: $buic-foreground-warning;
-  }
-
-  &.error {
-    color: $buic-foreground-alert;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-inputs-radio {
+
+  display: block;
+  position: relative;
+  padding-left: $iui-l;
+  font-size: $iui-font-size;
+  cursor: pointer;
+  user-select: none;
+  color: $buic-foreground-body;
+  min-height: 1.57em;
+
+  > input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    cursor: pointer;
+  }
+
+  .core-radio-checkmark {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 1em;
+    width: 1em;
+    border: 1px solid $buic-foreground-disabled;
+    background-color: $buic-background-control;
+    border-radius: 50%;
+  }
+
+  &:hover:not(.core-disabled) input ~ .core-radio-checkmark {
+    border-color:     $buic-foreground-activehover;
+    transition:       all $iui-speed-fast ease-out;
+  }
+
+  & input:checked ~ .core-radio-checkmark {
+    border-color:     $buic-foreground-muted;
+  }
+
+  & input:active ~ .core-radio-checkmark,
+  & input:focus ~ .core-radio-checkmark {
+    border-color:     $buic-foreground-focus-border;
+    box-shadow:       $uicore-inputs-focus-boxshadow;
+  }
+
+  .core-radio-checkmark::after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  & input:checked ~ .core-radio-checkmark::after {
+    display: block;
+  }
+
+  & .core-radio-checkmark::after {
+    top: 3px;
+    left: 3px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+  }
+
+  &.core-disabled {
+    opacity: $uicore-opacity-disabled;
+    cursor: not-allowed;
+  }
+
+  &.success {
+    color: $buic-foreground-success;
+  }
+
+  &.warning {
+    color: $buic-foreground-warning;
+  }
+
+  &.error {
+    color: $buic-foreground-alert;
+  }
+}

package/lib/cjs/core-react/searchbox/SearchBox.d.ts

@@ -1,53 +1,53 @@
-/** @packageDocumentation
- * @module SearchBox
- */
-import "./SearchBox.scss";
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for [[SearchBox]] component
- * @public
- */
-export interface SearchBoxProps extends CommonProps {
-    /** Value to set SearchBox to initially */
-    initialValue?: string;
-    /** Placeholder value to show in gray before anything is entered in */
-    placeholder?: string;
-    /** Triggered when the content of SearchBox is changed */
-    onValueChanged: (value: string) => void;
-    /** Frequency to poll for changes in value, in milliseconds */
-    valueChangedDelay?: number;
-    /** Listens for <Enter> keypress */
-    onEnterPressed?: () => void;
-    /** Listens for <Esc> keypress */
-    onEscPressed?: () => void;
-    /** Listens for onClick event for Clear (x) icon */
-    onClear?: () => void;
-}
-/** @internal */
-interface SearchBoxState {
-    value: string;
-}
-/**
- * Input box for entering text to search for.
- * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
- * @public
- */
-export declare class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
-    private _inputElement;
-    private _timeoutId;
-    /** @internal */
-    readonly state: Readonly<SearchBoxState>;
-    constructor(props: SearchBoxProps);
-    /** @internal */
-    render(): React.ReactNode;
-    /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
-    private _onValueChanged;
-    private _trackChange;
-    private _handleKeyDown;
-    private _handleIconClick;
-    private _unsetTimeout;
-    componentWillUnmount(): void;
-    focus(): void;
-}
-export {};
+/** @packageDocumentation
+ * @module SearchBox
+ */
+import "./SearchBox.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[SearchBox]] component
+ * @public
+ */
+export interface SearchBoxProps extends CommonProps {
+    /** Value to set SearchBox to initially */
+    initialValue?: string;
+    /** Placeholder value to show in gray before anything is entered in */
+    placeholder?: string;
+    /** Triggered when the content of SearchBox is changed */
+    onValueChanged: (value: string) => void;
+    /** Frequency to poll for changes in value, in milliseconds */
+    valueChangedDelay?: number;
+    /** Listens for <Enter> keypress */
+    onEnterPressed?: () => void;
+    /** Listens for <Esc> keypress */
+    onEscPressed?: () => void;
+    /** Listens for onClick event for Clear (x) icon */
+    onClear?: () => void;
+}
+/** @internal */
+interface SearchBoxState {
+    value: string;
+}
+/**
+ * Input box for entering text to search for.
+ * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
+ * @public
+ */
+export declare class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
+    private _inputElement;
+    private _timeoutId;
+    /** @internal */
+    readonly state: Readonly<SearchBoxState>;
+    constructor(props: SearchBoxProps);
+    /** @internal */
+    render(): React.ReactNode;
+    /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
+    private _onValueChanged;
+    private _trackChange;
+    private _handleKeyDown;
+    private _handleIconClick;
+    private _unsetTimeout;
+    componentWillUnmount(): void;
+    focus(): void;
+}
+export {};
 //# sourceMappingURL=SearchBox.d.ts.map

package/lib/cjs/core-react/searchbox/SearchBox.js

@@ -1,110 +1,110 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module SearchBox
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchBox = void 0;
-require("./SearchBox.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const UiCore_1 = require("../UiCore");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-/**
- * Input box for entering text to search for.
- * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
- * @public
- */
-class SearchBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this._inputElement = null;
-        this._timeoutId = 0;
-        /** @internal */
-        this.state = { value: this.props.initialValue || "" };
-        /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
-        this._onValueChanged = (value, previousValue) => {
-            // istanbul ignore else
-            if (value === previousValue)
-                return;
-            this.setState((_prevState) => {
-                return {
-                    value,
-                };
-            }, () => { this.props.onValueChanged(this.state.value); });
-        };
-        this._trackChange = (_event) => {
-            let value = "";
-            const previousValue = this.state.value;
-            // istanbul ignore else
-            if (this._inputElement)
-                value = this._inputElement.value;
-            if (this.props.valueChangedDelay) {
-                this._unsetTimeout();
-                this._timeoutId = window.setTimeout(() => { this._onValueChanged(value, previousValue); }, this.props.valueChangedDelay);
-            }
-            else {
-                this._onValueChanged(value, previousValue);
-            }
-        };
-        this._handleKeyDown = (e) => {
-            switch (e.key) {
-                case appui_abstract_1.SpecialKey.Escape:
-                    // istanbul ignore else
-                    if (this.props.onEscPressed)
-                        this.props.onEscPressed();
-                    break;
-                case appui_abstract_1.SpecialKey.Enter:
-                    // istanbul ignore else
-                    if (this.props.onEnterPressed)
-                        this.props.onEnterPressed();
-                    break;
-            }
-        };
-        this._handleIconClick = (_event) => {
-            // istanbul ignore else
-            if (this._inputElement) {
-                const clear = this.state.value !== "";
-                this._inputElement.value = "";
-                // istanbul ignore else
-                if (clear && this.props.onClear)
-                    this.props.onClear();
-                this._inputElement.focus();
-            }
-            this._trackChange();
-        };
-        this._unsetTimeout = () => {
-            if (this._timeoutId) {
-                window.clearTimeout(this._timeoutId);
-                this._timeoutId = 0;
-            }
-        };
-    }
-    /** @internal */
-    render() {
-        const searchClassName = (0, classnames_1.default)("core-searchbox", this.props.className);
-        const emptyString = this.state.value === "";
-        const iconClassName = (0, classnames_1.default)("core-searchbox-icon", "icon", {
-            "icon-search": emptyString,
-            "icon-close": !emptyString,
-        });
-        const buttonTitle = UiCore_1.UiCore.translate(emptyString ? "general.search" : "general.clear");
-        return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
-            React.createElement("input", { defaultValue: this.props.initialValue, ref: (el) => { this._inputElement = el; }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder ? this.props.placeholder : UiCore_1.UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
-            React.createElement("div", { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, title: buttonTitle },
-                React.createElement("span", { className: iconClassName }))));
-    }
-    componentWillUnmount() {
-        this._unsetTimeout();
-    }
-    focus() {
-        // istanbul ignore else
-        if (this._inputElement)
-            this._inputElement.focus();
-    }
-}
-exports.SearchBox = SearchBox;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SearchBox
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBox = void 0;
+require("./SearchBox.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const UiCore_1 = require("../UiCore");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/**
+ * Input box for entering text to search for.
+ * The SearchBox has an icon right-justified and bounded by the box and shows a Search or Clear icon.
+ * @public
+ */
+class SearchBox extends React.Component {
+    constructor(props) {
+        super(props);
+        this._inputElement = null;
+        this._timeoutId = 0;
+        /** @internal */
+        this.state = { value: this.props.initialValue || "" };
+        /** Wrapper for onValueChanged to make sure we don't call search unless the new value is different from the previous value */
+        this._onValueChanged = (value, previousValue) => {
+            // istanbul ignore else
+            if (value === previousValue)
+                return;
+            this.setState((_prevState) => {
+                return {
+                    value,
+                };
+            }, () => { this.props.onValueChanged(this.state.value); });
+        };
+        this._trackChange = (_event) => {
+            let value = "";
+            const previousValue = this.state.value;
+            // istanbul ignore else
+            if (this._inputElement)
+                value = this._inputElement.value;
+            if (this.props.valueChangedDelay) {
+                this._unsetTimeout();
+                this._timeoutId = window.setTimeout(() => { this._onValueChanged(value, previousValue); }, this.props.valueChangedDelay);
+            }
+            else {
+                this._onValueChanged(value, previousValue);
+            }
+        };
+        this._handleKeyDown = (e) => {
+            switch (e.key) {
+                case appui_abstract_1.SpecialKey.Escape:
+                    // istanbul ignore else
+                    if (this.props.onEscPressed)
+                        this.props.onEscPressed();
+                    break;
+                case appui_abstract_1.SpecialKey.Enter:
+                    // istanbul ignore else
+                    if (this.props.onEnterPressed)
+                        this.props.onEnterPressed();
+                    break;
+            }
+        };
+        this._handleIconClick = (_event) => {
+            // istanbul ignore else
+            if (this._inputElement) {
+                const clear = this.state.value !== "";
+                this._inputElement.value = "";
+                // istanbul ignore else
+                if (clear && this.props.onClear)
+                    this.props.onClear();
+                this._inputElement.focus();
+            }
+            this._trackChange();
+        };
+        this._unsetTimeout = () => {
+            if (this._timeoutId) {
+                window.clearTimeout(this._timeoutId);
+                this._timeoutId = 0;
+            }
+        };
+    }
+    /** @internal */
+    render() {
+        const searchClassName = (0, classnames_1.default)("core-searchbox", this.props.className);
+        const emptyString = this.state.value === "";
+        const iconClassName = (0, classnames_1.default)("core-searchbox-icon", "icon", {
+            "icon-search": emptyString,
+            "icon-close": !emptyString,
+        });
+        const buttonTitle = UiCore_1.UiCore.translate(emptyString ? "general.search" : "general.clear");
+        return (React.createElement("div", { className: searchClassName, style: this.props.style, "data-testid": "core-searchbox-instance" },
+            React.createElement("input", { defaultValue: this.props.initialValue, ref: (el) => { this._inputElement = el; }, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: this.props.placeholder ? this.props.placeholder : UiCore_1.UiCore.translate("general.search"), role: "searchbox", "data-testid": "core-searchbox-input" }),
+            React.createElement("div", { className: "core-searchbox-button", onClick: this._handleIconClick, role: "button", tabIndex: -1, title: buttonTitle },
+                React.createElement("span", { className: iconClassName }))));
+    }
+    componentWillUnmount() {
+        this._unsetTimeout();
+    }
+    focus() {
+        // istanbul ignore else
+        if (this._inputElement)
+            this._inputElement.focus();
+    }
+}
+exports.SearchBox = SearchBox;
 //# sourceMappingURL=SearchBox.js.map