@itwin/imodel-components-react 4.0.0-dev.8 → 4.0.0

package/lib/esm/imodel-components-react/editors/WeightEditor.js

@@ -1,134 +1,134 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./WeightEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
-import { WeightPickerButton } from "../lineweight/WeightPickerButton";
-/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
- * @public
- */
-export class WeightEditor extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._control = null;
-        this._isMounted = false;
-        this._availableWeights = [];
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            weightValue: 0,
-            readonly: false,
-        };
-        this._onLineWeightPick = (weight) => {
-            const propertyRecord = this.props.propertyRecord;
-            this.setState({
-                weightValue: weight,
-            }, async () => {
-                // istanbul ignore else
-                if (propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (propertyValue !== undefined) {
-                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
-                    }
-                }
-            });
-        };
-        // TODO: add support for following if we need to specify set of weights to display
-        //  const record = this.props.propertyRecord;
-        //  if (record && record.property && record.property.editor && record.property.editor.params) {
-        //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;
-        //    // istanbul ignore else
-        //    if (weightParams) {
-        //      weightParams.weightValues.forEach((weight: number) => {
-        //        this._availableWeights.push(weight);
-        //      });
-        //    }
-        //   }
-    }
-    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.weightValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this._divElement.current)
-            containsFocus = this._divElement.current.contains(document.activeElement);
-        return containsFocus;
-    }
-    setFocus() {
-        // istanbul ignore else
-        if (this._control && !this.state.isDisabled) {
-            this._control.setFocus();
-        }
-    }
-    /** @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;
-        const isDisabled = record ? record.isDisabled : undefined;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {
-                if (this.props.setFocus) {
-                    this.setFocus();
-                }
-            });
-    }
-    /** @internal */
-    render() {
-        return (React.createElement("div", { className: classnames("components-weight-editor", this.props.className), style: this.props.style, ref: this._divElement },
-            React.createElement(WeightPickerButton, { ref: (control) => this._control = control, activeWeight: this.state.weightValue, weights: this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onLineWeightPick: this._onLineWeightPick, "data-testid": "components-weight-editor" })));
-    }
-}
-/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
- * It uses the [[WeightEditor]] React component.
- * @public
- */
-export class WeightPropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get reactNode() {
-        return React.createElement(WeightEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);
+/*---------------------------------------------------------------------------------------------
+* 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 "./WeightEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
+import { WeightPickerButton } from "../lineweight/WeightPickerButton";
+/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
+ * @public
+ */
+export class WeightEditor extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._control = null;
+        this._isMounted = false;
+        this._availableWeights = [];
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            weightValue: 0,
+            readonly: false,
+        };
+        this._onLineWeightPick = (weight) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                weightValue: weight,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+        // TODO: add support for following if we need to specify set of weights to display
+        //  const record = this.props.propertyRecord;
+        //  if (record && record.property && record.property.editor && record.property.editor.params) {
+        //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;
+        //    // istanbul ignore else
+        //    if (weightParams) {
+        //      weightParams.weightValues.forEach((weight: number) => {
+        //        this._availableWeights.push(weight);
+        //      });
+        //    }
+        //   }
+    }
+    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.weightValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._control && !this.state.isDisabled) {
+            this._control.setFocus();
+        }
+    }
+    /** @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;
+        const isDisabled = record ? record.isDisabled : undefined;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+    }
+    /** @internal */
+    render() {
+        return (React.createElement("div", { className: classnames("components-weight-editor", this.props.className), style: this.props.style, ref: this._divElement },
+            React.createElement(WeightPickerButton, { ref: (control) => this._control = control, activeWeight: this.state.weightValue, weights: this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onLineWeightPick: this._onLineWeightPick, "data-testid": "components-weight-editor" })));
+    }
+}
+/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
+ * It uses the [[WeightEditor]] React component.
+ * @public
+ */
+export class WeightPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get reactNode() {
+        return React.createElement(WeightEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);
 //# sourceMappingURL=WeightEditor.js.map

package/lib/esm/imodel-components-react/editors/WeightEditor.scss

@@ -3,15 +3,14 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 $components-weight-editor-item-height: 100%;
 
 .components-weight-editor {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
-  color: $buic-foreground-body;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
   border: none;
   box-sizing: border-box;
   height: $components-weight-editor-item-height;
-}
+}

package/lib/esm/imodel-components-react/inputs/QuantityInput.d.ts

@@ -1,26 +1,26 @@
-/** @packageDocumentation
- * @module Inputs
- */
-import * as React from "react";
-import { QuantityTypeArg } from "@itwin/core-frontend";
-import { CommonProps } from "@itwin/core-react";
-/** Props for [[QuantityInput]] control
- * @beta
- */
-export interface QuantityProps extends CommonProps {
-    /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */
-    initialValue: number;
-    /** Type of quantity being input. */
-    quantityType: QuantityTypeArg;
-    /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */
-    onQuantityChange: (newQuantityValue: number) => void;
-    /** Set to `true` if value is for display only */
-    readonly?: boolean;
-    /** Provides ability to return reference to HTMLInputElement */
-    ref?: React.Ref<HTMLInputElement>;
-}
-/** Input control that allows users to input a quantity and show the formatted string that represents the value.
- * @beta
- */
-export declare function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps): JSX.Element;
+/** @packageDocumentation
+ * @module Inputs
+ */
+import * as React from "react";
+import { QuantityTypeArg } from "@itwin/core-frontend";
+import { CommonProps } from "@itwin/core-react";
+/** Props for [[QuantityInput]] control
+ * @beta
+ */
+export interface QuantityProps extends CommonProps {
+    /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */
+    initialValue: number;
+    /** Type of quantity being input. */
+    quantityType: QuantityTypeArg;
+    /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */
+    onQuantityChange: (newQuantityValue: number) => void;
+    /** Set to `true` if value is for display only */
+    readonly?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Input control that allows users to input a quantity and show the formatted string that represents the value.
+ * @beta
+ */
+export declare function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps): JSX.Element;
 //# sourceMappingURL=QuantityInput.d.ts.map

package/lib/esm/imodel-components-react/inputs/QuantityInput.js

@@ -1,71 +1,71 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Inputs
- */
-import classnames from "classnames";
-import * as React from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { Parser } from "@itwin/core-quantity";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { ParsedInput } from "@itwin/components-react";
-/** Input control that allows users to input a quantity and show the formatted string that represents the value.
- * @beta
- */
-export function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }) {
-    const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-    const formatValue = React.useCallback((value) => {
-        // istanbul ignore else
-        if (formatterSpec) {
-            return formatterSpec.applyFormatting(value);
-        }
-        // istanbul ignore next
-        return value.toFixed(2);
-    }, [formatterSpec]);
-    const parseString = React.useCallback((userInput) => {
-        // istanbul ignore else
-        if (parserSpec) {
-            const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);
-            // istanbul ignore else
-            if (Parser.isParsedQuantity(parseResult)) {
-                return { value: parseResult.value };
-            }
-            else {
-                const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : "Unknown";
-                return { parseError: `${UiIModelComponents.translate("QuantityInput.NoParserDefined")}${statusId}` };
-            }
-        }
-        // istanbul ignore next
-        return { parseError: UiIModelComponents.translate("QuantityInput.NoParserDefined") };
-    }, [parserSpec]);
-    const classNames = classnames(className, "components-quantity-input");
-    React.useEffect(() => {
-        const handleUnitSystemChanged = (() => {
-            setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-            setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-        });
-        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [quantityType]);
-    React.useEffect(() => {
-        const handleUnitSystemChanged = ((args) => {
-            const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);
-            // istanbul ignore else
-            if (args.quantityType === quantityKey) {
-                setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-                setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-            }
-        });
-        IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [quantityType]);
-    return React.createElement(ParsedInput, { "data-testid": "components-quantity-input", ref: ref, style: style, className: classNames, onChange: onQuantityChange, initialValue: initialValue, readonly: readonly, formatValue: formatValue, parseString: parseString });
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { Parser } from "@itwin/core-quantity";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { ParsedInput } from "@itwin/components-react";
+/** Input control that allows users to input a quantity and show the formatted string that represents the value.
+ * @beta
+ */
+export function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }) {
+    const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+    const formatValue = React.useCallback((value) => {
+        // istanbul ignore else
+        if (formatterSpec) {
+            return formatterSpec.applyFormatting(value);
+        }
+        // istanbul ignore next
+        return value.toFixed(2);
+    }, [formatterSpec]);
+    const parseString = React.useCallback((userInput) => {
+        // istanbul ignore else
+        if (parserSpec) {
+            const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);
+            // istanbul ignore else
+            if (Parser.isParsedQuantity(parseResult)) {
+                return { value: parseResult.value };
+            }
+            else {
+                const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : "Unknown";
+                return { parseError: `${UiIModelComponents.translate("QuantityInput.NoParserDefined")}${statusId}` };
+            }
+        }
+        // istanbul ignore next
+        return { parseError: UiIModelComponents.translate("QuantityInput.NoParserDefined") };
+    }, [parserSpec]);
+    const classNames = classnames(className, "components-quantity-input");
+    React.useEffect(() => {
+        const handleUnitSystemChanged = (() => {
+            setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+            setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+        });
+        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [quantityType]);
+    React.useEffect(() => {
+        const handleUnitSystemChanged = ((args) => {
+            const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);
+            // istanbul ignore else
+            if (args.quantityType === quantityKey) {
+                setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+                setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+            }
+        });
+        IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [quantityType]);
+    return React.createElement(ParsedInput, { "data-testid": "components-quantity-input", ref: ref, style: style, className: classNames, onChange: onQuantityChange, initialValue: initialValue, readonly: readonly, formatValue: formatValue, parseString: parseString });
+}
 //# sourceMappingURL=QuantityInput.js.map

package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.d.ts

@@ -1,45 +1,45 @@
-/** @packageDocumentation
- * @module Inputs
- */
-import "./QuantityNumberInput.scss";
-import * as React from "react";
-import { QuantityTypeArg } from "@itwin/core-frontend";
-import { InputProps } from "@itwin/itwinui-react";
-/** Step function prototype for [[QuantityNumberInput]] component
- * @beta
- */
-export declare type StepFunctionProp = number | ((direction: string) => number | undefined);
-/** Properties for the [[QuantityNumberInput]] component
- * @beta
- */
-export interface QuantityNumberInputProps extends Omit<InputProps, "value" | "min" | "max" | "step" | "onFocus" | "onChange"> {
-    /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend).
-     * Set to `undefined` to show placeholder text */
-    persistenceValue?: number;
-    /** CSS class name for the QuantityNumberInput component container div */
-    containerClassName?: string;
-    /** number or function	Number.MIN_SAFE_INTEGER */
-    min?: number;
-    /** number or function	defaults to Number.MAX_SAFE_INTEGER */
-    max?: number;
-    /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */
-    step?: StepFunctionProp;
-    /** Set to true to "snap" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */
-    snap?: boolean;
-    /** Function to call when the quantity value is changed. The value returned will be in 'persistence' units. */
-    onChange?: (value: number) => void;
-    /** if true up/down buttons are shown larger and side by side */
-    showTouchButtons?: boolean;
-    /** Provides ability to return reference to HTMLInputElement */
-    ref?: React.Ref<HTMLInputElement>;
-    /** Type of quantity being input. */
-    quantityType: QuantityTypeArg;
-}
-/** The QuantityNumberInput component accepts input for quantity values. The quantity value is shown as a single numeric value and the quantity's
- * "display" unit is shown next to the input control. The "display" unit is determined by the active unit system as defined by the [QuantityFormatter]($frontend).
- * The control also display buttons to increment and decrement the "displayed" value. The value reported by via the onChange function is in "persistence"
- * units that can be stored in the iModel.
- * @beta
- */
-export declare const QuantityNumberInput: (props: QuantityNumberInputProps) => JSX.Element | null;
+/** @packageDocumentation
+ * @module Inputs
+ */
+import "./QuantityNumberInput.scss";
+import * as React from "react";
+import { QuantityTypeArg } from "@itwin/core-frontend";
+import { InputProps } from "@itwin/itwinui-react";
+/** Step function prototype for [[QuantityNumberInput]] component
+ * @beta
+ */
+export type StepFunctionProp = number | ((direction: string) => number | undefined);
+/** Properties for the [[QuantityNumberInput]] component
+ * @beta
+ */
+export interface QuantityNumberInputProps extends Omit<InputProps, "value" | "min" | "max" | "step" | "onFocus" | "onChange"> {
+    /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend).
+     * Set to `undefined` to show placeholder text */
+    persistenceValue?: number;
+    /** CSS class name for the QuantityNumberInput component container div */
+    containerClassName?: string;
+    /** number or function	Number.MIN_SAFE_INTEGER */
+    min?: number;
+    /** number or function	defaults to Number.MAX_SAFE_INTEGER */
+    max?: number;
+    /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */
+    step?: StepFunctionProp;
+    /** Set to true to "snap" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */
+    snap?: boolean;
+    /** Function to call when the quantity value is changed. The value returned will be in 'persistence' units. */
+    onChange?: (value: number) => void;
+    /** if true up/down buttons are shown larger and side by side */
+    showTouchButtons?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+    /** Type of quantity being input. */
+    quantityType: QuantityTypeArg;
+}
+/** The QuantityNumberInput component accepts input for quantity values. The quantity value is shown as a single numeric value and the quantity's
+ * "display" unit is shown next to the input control. The "display" unit is determined by the active unit system as defined by the [QuantityFormatter]($frontend).
+ * The control also display buttons to increment and decrement the "displayed" value. The value reported by via the onChange function is in "persistence"
+ * units that can be stored in the iModel.
+ * @beta
+ */
+export declare const QuantityNumberInput: (props: QuantityNumberInputProps) => JSX.Element | null;
 //# sourceMappingURL=QuantityNumberInput.d.ts.map

package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityNumberInput.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEzD;;GAEG;AACH,oBAAY,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3H;qDACiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,oCAAoC;IACpC,YAAY,EAAE,eAAe,CAAC;CAC/B;AA8QD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAoC,CAAC"}
+{"version":3,"file":"QuantityNumberInput.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGzD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3H;qDACiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,oCAAoC;IACpC,YAAY,EAAE,eAAe,CAAC;CAC/B;AAkRD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAoC,CAAC"}