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

package/lib/esm/components-react/editors/NumericInputEditor.d.ts

@@ -1,53 +1,53 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./NumericInputEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-import { PropertyEditorBase } from "./PropertyEditorManager";
-/** @internal */
-interface NumericInputEditorState {
-    value: number;
-    readonly: boolean;
-    isDisabled?: boolean;
-    size?: number;
-    maxLength?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    precision?: number;
-}
-/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons
- * @public
- */
-export declare class NumericInputEditor extends React.PureComponent<PropertyEditorProps, NumericInputEditorState> implements TypeEditor {
-    private _isMounted;
-    private _inputElement;
-    hasFocus: boolean;
-    /** @internal */
-    readonly state: Readonly<NumericInputEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    private _handleCommit;
-    private _updateValue;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): React.ReactNode;
-}
-/** Numeric Input Property Editor registered for the "number" type name and "numeric-input" editor name.
- * It uses the [[NumericInputEditor]] React component.
- * @public
- */
-export declare class NumericInputPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-    get containerHandlesEnter(): boolean;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./NumericInputEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+import { PropertyEditorBase } from "./PropertyEditorManager";
+/** @internal */
+interface NumericInputEditorState {
+    value: number;
+    readonly: boolean;
+    isDisabled?: boolean;
+    size?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+}
+/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons
+ * @public
+ */
+export declare class NumericInputEditor extends React.PureComponent<PropertyEditorProps, NumericInputEditorState> implements TypeEditor {
+    private _isMounted;
+    private _inputElement;
+    hasFocus: boolean;
+    /** @internal */
+    readonly state: Readonly<NumericInputEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    private _handleCommit;
+    private _updateValue;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): React.ReactNode;
+}
+/** Numeric Input Property Editor registered for the "number" type name and "numeric-input" editor name.
+ * It uses the [[NumericInputEditor]] React component.
+ * @public
+ */
+export declare class NumericInputPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+    get containerHandlesEnter(): boolean;
+}
+export {};
 //# sourceMappingURL=NumericInputEditor.d.ts.map

package/lib/esm/components-react/editors/NumericInputEditor.js

@@ -1,145 +1,145 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./NumericInputEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
-import { NumberInput } from "@itwin/core-react";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons
- * @public
- */
-export class NumericInputEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._inputElement = React.createRef();
-        this.hasFocus = false; // hot used since containerHandlesEnter is false
-        /** @internal */
-        this.state = {
-            value: 0,
-            readonly: false,
-        };
-        this._handleCommit = async () => {
-            // istanbul ignore else
-            if (this.props.propertyRecord && this.props.onCommit) {
-                const propertyValue = await this.getPropertyValue();
-                // istanbul ignore else
-                if (propertyValue !== undefined) {
-                    this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
-                }
-            }
-        };
-        this._updateValue = (value, _stringValue) => {
-            const newValue = value !== undefined ? value : /* istanbul ignore next */ 0;
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState({
-                    value: newValue,
-                }, async () => {
-                    await this._handleCommit();
-                });
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: this.state.value,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._inputElement.current;
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        let initialValue = 0;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            initialValue = record.value.value;
-        }
-        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
-        let size;
-        let maxLength;
-        let min;
-        let max;
-        let step;
-        let precision;
-        const isDisabled = record ? record.isDisabled : undefined;
-        if (record && record.property && record.property.editor && record.property.editor.params) {
-            const editorSizeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.InputEditorSize);
-            if (editorSizeParams) {
-                // istanbul ignore else
-                if (editorSizeParams.size)
-                    size = editorSizeParams.size;
-                // istanbul ignore else
-                if (editorSizeParams.maxLength)
-                    maxLength = editorSizeParams.maxLength;
-            }
-            const rangeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Range);
-            if (rangeParams) {
-                min = rangeParams.minimum;
-                max = rangeParams.maximum;
-                step = rangeParams.step;
-                precision = rangeParams.precision;
-            }
-        }
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ value: initialValue, readonly, size, maxLength, isDisabled, min, max, step, precision });
-    }
-    /** @internal */
-    render() {
-        const className = classnames("components-cell-editor", "components-numeric-input-editor", this.props.className);
-        const minSize = this.state.size ? this.state.size : 8;
-        const style = {
-            ...this.props.style,
-            minWidth: `${minSize * 0.75}em`,
-        };
-        return (React.createElement(NumberInput, { ref: this._inputElement, className: className, style: style, value: this.state.value, min: this.state.min, max: this.state.max, step: this.state.step, precision: this.state.precision, readOnly: this.state.readonly, maxLength: this.state.maxLength, onBlur: this.props.onBlur, onChange: this._updateValue, setFocus: this.props.setFocus && !this.state.isDisabled, isControlled: this.props.shouldCommitOnChange }));
-    }
-}
-/** Numeric Input Property Editor registered for the "number" type name and "numeric-input" editor name.
- * It uses the [[NumericInputEditor]] React component.
- * @public
- */
-export class NumericInputPropertyEditor extends PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(NumericInputEditor, null);
-    }
-    // istanbul ignore next
-    get containerHandlesEnter() {
-        return false;
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
-PropertyEditorManager.registerEditor(StandardTypeNames.Int, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
-PropertyEditorManager.registerEditor(StandardTypeNames.Float, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
-PropertyEditorManager.registerEditor(StandardTypeNames.Double, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./NumericInputEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
+import { NumberInput } from "@itwin/core-react";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons
+ * @public
+ */
+export class NumericInputEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        this.hasFocus = false; // hot used since containerHandlesEnter is false
+        /** @internal */
+        this.state = {
+            value: 0,
+            readonly: false,
+        };
+        this._handleCommit = async () => {
+            // istanbul ignore else
+            if (this.props.propertyRecord && this.props.onCommit) {
+                const propertyValue = await this.getPropertyValue();
+                // istanbul ignore else
+                if (propertyValue !== undefined) {
+                    this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
+                }
+            }
+        };
+        this._updateValue = (value, _stringValue) => {
+            const newValue = value !== undefined ? value : /* istanbul ignore next */ 0;
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({
+                    value: newValue,
+                }, async () => {
+                    await this._handleCommit();
+                });
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.value,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = 0;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            initialValue = record.value.value;
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        let size;
+        let maxLength;
+        let min;
+        let max;
+        let step;
+        let precision;
+        const isDisabled = record ? record.isDisabled : undefined;
+        if (record && record.property && record.property.editor && record.property.editor.params) {
+            const editorSizeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.InputEditorSize);
+            if (editorSizeParams) {
+                // istanbul ignore else
+                if (editorSizeParams.size)
+                    size = editorSizeParams.size;
+                // istanbul ignore else
+                if (editorSizeParams.maxLength)
+                    maxLength = editorSizeParams.maxLength;
+            }
+            const rangeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Range);
+            if (rangeParams) {
+                min = rangeParams.minimum;
+                max = rangeParams.maximum;
+                step = rangeParams.step;
+                precision = rangeParams.precision;
+            }
+        }
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ value: initialValue, readonly, size, maxLength, isDisabled, min, max, step, precision });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-numeric-input-editor", this.props.className);
+        const minSize = this.state.size ? this.state.size : 8;
+        const style = {
+            ...this.props.style,
+            minWidth: `${minSize * 0.75}em`,
+        };
+        return (React.createElement(NumberInput, { ref: this._inputElement, className: className, style: style, value: this.state.value, min: this.state.min, max: this.state.max, step: this.state.step, precision: this.state.precision, readOnly: this.state.readonly, maxLength: this.state.maxLength, onBlur: this.props.onBlur, onChange: this._updateValue, setFocus: this.props.setFocus && !this.state.isDisabled, isControlled: this.props.shouldCommitOnChange }));
+    }
+}
+/** Numeric Input Property Editor registered for the "number" type name and "numeric-input" editor name.
+ * It uses the [[NumericInputEditor]] React component.
+ * @public
+ */
+export class NumericInputPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(NumericInputEditor, null);
+    }
+    // istanbul ignore next
+    get containerHandlesEnter() {
+        return false;
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
+PropertyEditorManager.registerEditor(StandardTypeNames.Int, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
+PropertyEditorManager.registerEditor(StandardTypeNames.Float, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
+PropertyEditorManager.registerEditor(StandardTypeNames.Double, NumericInputPropertyEditor, StandardEditorNames.NumericInput);
 //# sourceMappingURL=NumericInputEditor.js.map

package/lib/esm/components-react/editors/NumericInputEditor.scss

@@ -2,7 +2,6 @@
 * 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/style/variables";
 @import "./variables";
 
 .components-smallEditor-host {
@@ -10,7 +9,7 @@
   .components-numeric-input-editor {
 
     &.iui-input {
-      min-height: $uicore-component-height-small !important;
+      min-height: $editor-component-height-small !important;
       padding-top: 0px !important;
       padding-bottom: 0px !important;
     }

package/lib/esm/components-react/editors/PopupButton.d.ts

@@ -1,73 +1,73 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./PopupButton.scss";
-import * as React from "react";
-import { CommonDivProps, CommonProps } from "@itwin/core-react";
-/** Properties for [[PopupButton]] component
- * @alpha
- */
-export interface PopupButtonProps extends CommonProps {
-    /** Label to display in click area. */
-    label?: string | React.ReactNode;
-    placeholder?: string;
-    /** Contents of the popup */
-    children: React.ReactNode;
-    /** Title to display as tooltip. */
-    title?: string;
-    /** Set focus to popup - default is to set focus */
-    moveFocus?: boolean;
-    /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */
-    focusTarget?: React.RefObject<HTMLElement> | string;
-    /** Show or hide the box shadow (defaults to false) */
-    showShadow?: boolean;
-    /** Show or hide the arrow (defaults to false) */
-    showArrow?: boolean;
-    /** Indicates whether to set focus to the input element */
-    setFocus?: boolean;
-    /** Indicates whether to close the popup when Enter is pressed (defaults to true) */
-    closeOnEnter?: boolean;
-    /** Listens for click events on button area */
-    onClick?: (event: React.MouseEvent) => void;
-    /** Listens for popup close events */
-    onClose?: () => void;
-    /** Listens for Enter key in popup */
-    onEnter?: () => void;
-}
-/** @internal */
-interface PopupButtonState {
-    showPopup: boolean;
-}
-/** PopupButton React component that is a button and property editor popup host
- * @alpha
- */
-export declare class PopupButton extends React.PureComponent<PopupButtonProps, PopupButtonState> {
-    private _buttonRef;
-    /** @internal */
-    readonly state: Readonly<PopupButtonState>;
-    /** @internal */
-    componentDidMount(): void;
-    private _togglePopup;
-    closePopup(): void;
-    private _closePopup;
-    private _handleKeyDown;
-    /** @internal */
-    render(): React.ReactNode;
-}
-/** Popup content with padding
- * @alpha
- */
-export declare function PopupContent(props: CommonDivProps): JSX.Element;
-/** Properties for [[PopupOkCancelButtons]] component
- * @alpha
- */
-export interface OkCancelProps {
-    onOk: (event: React.MouseEvent) => void;
-    onCancel: (event: React.MouseEvent) => void;
-}
-/** OK/Cancel Buttons
- * @alpha
- */
-export declare function PopupOkCancelButtons(props: OkCancelProps): JSX.Element;
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./PopupButton.scss";
+import * as React from "react";
+import { CommonDivProps, CommonProps } from "@itwin/core-react";
+/** Properties for [[PopupButton]] component
+ * @alpha
+ */
+export interface PopupButtonProps extends CommonProps {
+    /** Label to display in click area. */
+    label?: string | React.ReactNode;
+    placeholder?: string;
+    /** Contents of the popup */
+    children: React.ReactNode;
+    /** Title to display as tooltip. */
+    title?: string;
+    /** Set focus to popup - default is to set focus */
+    moveFocus?: boolean;
+    /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */
+    focusTarget?: React.RefObject<HTMLElement> | string;
+    /** Show or hide the box shadow (defaults to false) */
+    showShadow?: boolean;
+    /** Show or hide the arrow (defaults to false) */
+    showArrow?: boolean;
+    /** Indicates whether to set focus to the input element */
+    setFocus?: boolean;
+    /** Indicates whether to close the popup when Enter is pressed (defaults to true) */
+    closeOnEnter?: boolean;
+    /** Listens for click events on button area */
+    onClick?: (event: React.MouseEvent) => void;
+    /** Listens for popup close events */
+    onClose?: () => void;
+    /** Listens for Enter key in popup */
+    onEnter?: () => void;
+}
+/** @internal */
+interface PopupButtonState {
+    showPopup: boolean;
+}
+/** PopupButton React component that is a button and property editor popup host
+ * @alpha
+ */
+export declare class PopupButton extends React.PureComponent<PopupButtonProps, PopupButtonState> {
+    private _buttonRef;
+    /** @internal */
+    readonly state: Readonly<PopupButtonState>;
+    /** @internal */
+    componentDidMount(): void;
+    private _togglePopup;
+    closePopup(): void;
+    private _closePopup;
+    private _handleKeyDown;
+    /** @internal */
+    render(): React.ReactNode;
+}
+/** Popup content with padding
+ * @alpha
+ */
+export declare function PopupContent(props: CommonDivProps): JSX.Element;
+/** Properties for [[PopupOkCancelButtons]] component
+ * @alpha
+ */
+export interface OkCancelProps {
+    onOk: (event: React.MouseEvent) => void;
+    onCancel: (event: React.MouseEvent) => void;
+}
+/** OK/Cancel Buttons
+ * @alpha
+ */
+export declare function PopupOkCancelButtons(props: OkCancelProps): JSX.Element;
+export {};
 //# sourceMappingURL=PopupButton.d.ts.map