@itwin/core-react 4.0.0-dev.12 → 4.0.0-dev.14

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,112 +1,112 @@
-"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");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const IconComponent_1 = require("../icons/IconComponent");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-/**
- * 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");
-        const iconSpec = emptyString ? React.createElement(itwinui_icons_react_1.SvgSearch, null) : React.createElement(itwinui_icons_react_1.SvgClose, null);
-        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(itwinui_react_1.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 },
-                    React.createElement(IconComponent_1.Icon, { iconSpec: iconSpec })))));
-    }
-    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");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const IconComponent_1 = require("../icons/IconComponent");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/**
+ * 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");
+        const iconSpec = emptyString ? React.createElement(itwinui_icons_react_1.SvgSearch, null) : React.createElement(itwinui_icons_react_1.SvgClose, null);
+        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(itwinui_react_1.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 },
+                    React.createElement(IconComponent_1.Icon, { iconSpec: iconSpec })))));
+    }
+    componentWillUnmount() {
+        this._unsetTimeout();
+    }
+    focus() {
+        // istanbul ignore else
+        if (this._inputElement)
+            this._inputElement.focus();
+    }
+}
+exports.SearchBox = SearchBox;
 //# sourceMappingURL=SearchBox.js.map

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

@@ -3,7 +3,6 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "../style/themecolors";
-@import "../style/variables";
 
 .core-searchbox {
   font-family: var(--iui-font-sans);
@@ -11,13 +10,13 @@
   align-items: center;
   position: relative;
   //default values (height, width, font-size, color)
-  height: $uicore-component-height-normal;
+  height: 28px;
   width: 12em;
   font-size: var(--iui-font-size-1);
   color: var(--iui-color-text);
 
   input {
-    min-height: $uicore-component-height-normal;
+    min-height: 28px;
     padding: var(--iui-size-3xs) 2em var(--iui-size-3xs) 12px; //12px from design guide
     height: 100%;
     margin: 0;

package/lib/cjs/core-react/settings/SettingsContainer.d.ts

@@ -1,31 +1,31 @@
-/** @packageDocumentation
- * @module Settings
- */
-/// <reference types="react" />
-import "./SettingsContainer.scss";
-import { SettingsManager, SettingsTabEntry } from "./SettingsManager";
-/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
- * @public
- */
-export declare function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void): void;
-/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
- * @public
- */
-export declare function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void): void;
-/**
- * @public
- */
-export interface SettingsContainerProps {
-    tabs: SettingsTabEntry[];
-    currentSettingsTab?: SettingsTabEntry;
-    onSettingsTabSelected?: (tab: SettingsTabEntry) => void;
-    settingsManager: SettingsManager;
-    showHeader?: boolean;
-}
-/**
- * SettingsContainer component that displays Setting Tabs on Left and the P
- * Note: that SettingsContainer is not rendered if tabs array is empty
- * @public
- */
-export declare const SettingsContainer: ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }: SettingsContainerProps) => JSX.Element;
+/** @packageDocumentation
+ * @module Settings
+ */
+/// <reference types="react" />
+import "./SettingsContainer.scss";
+import { SettingsManager, SettingsTabEntry } from "./SettingsManager";
+/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
+ * @public
+ */
+export declare function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void): void;
+/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
+ * @public
+ */
+export declare function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void): void;
+/**
+ * @public
+ */
+export interface SettingsContainerProps {
+    tabs: SettingsTabEntry[];
+    currentSettingsTab?: SettingsTabEntry;
+    onSettingsTabSelected?: (tab: SettingsTabEntry) => void;
+    settingsManager: SettingsManager;
+    showHeader?: boolean;
+}
+/**
+ * SettingsContainer component that displays Setting Tabs on Left and the P
+ * Note: that SettingsContainer is not rendered if tabs array is empty
+ * @public
+ */
+export declare const SettingsContainer: ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }: SettingsContainerProps) => JSX.Element;
 //# sourceMappingURL=SettingsContainer.d.ts.map