@itwin/imodel-components-react 4.0.0-dev.11 → 4.0.0-dev.13

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

@@ -1,244 +1,244 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./QuantityNumberInput.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Icon } from "@itwin/core-react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { IModelApp } from "@itwin/core-frontend";
-import { DecimalPrecision, FormatterSpec, FormatTraits, FormatType, Parser } from "@itwin/core-quantity";
-import { Input } from "@itwin/itwinui-react";
-import { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from "@itwin/itwinui-icons-react";
-/** adjust formatter spec to show only primary unit without a label.  */
-function adjustFormatterSpec(formatterSpec) {
-    if (undefined === formatterSpec)
-        return formatterSpec;
-    const singleUnitConversion = [];
-    singleUnitConversion.push(formatterSpec.unitConversions[0]);
-    const newFormat = formatterSpec.format.clone({
-        showOnlyPrimaryUnit: true,
-        traits: formatterSpec.format.formatTraits & ~FormatTraits.ShowUnitLabel,
-        type: FormatType.Decimal,
-        precision: FormatType.Decimal !== formatterSpec.format.type ? DecimalPrecision.Four : formatterSpec.format.precision,
-    });
-    return new FormatterSpec("single-value", newFormat, singleUnitConversion, formatterSpec.persistenceUnit);
-}
-function convertValueFromDisplayToPersistence(value, unitConversions, unit) {
-    // istanbul ignore next
-    if (!unitConversions || 0 === unitConversions.length)
-        return value;
-    const unitConversion = unitConversions.find((spec) => spec.name === unit.name);
-    // istanbul ignore next
-    if (!unitConversion)
-        return value;
-    const convertedValue = (value * unitConversion.conversion.factor) + unitConversion.conversion.offset;
-    return convertedValue;
-}
-function getUnitLabel(parserSpec) {
-    if (undefined === parserSpec)
-        return "";
-    const format = parserSpec.format;
-    // istanbul ignore else
-    if (!format.units || !format.units[0])
-        return parserSpec.outUnit.label;
-    const [unit, label] = format.units[0];
-    // istanbul ignore next
-    return label !== null && label !== void 0 ? label : unit.label;
-}
-const ForwardRefQuantityNumberInput = React.forwardRef(function ForwardRefQuantityNumberInput(props, ref) {
-    const { containerClassName, persistenceValue, min, max, onChange, onBlur, onKeyDown, step, snap, showTouchButtons, quantityType, ...otherProps } = props;
-    const rawValueRef = React.useRef(persistenceValue);
-    const [formatterSpec, setFormatterSpec] = React.useState(() => adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
-    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-    const formatValue = React.useCallback((value) => {
-        if (undefined === value)
-            return "";
-        // istanbul ignore else
-        if (formatterSpec) {
-            return formatterSpec.applyFormatting(value);
-        }
-        // istanbul ignore next
-        return value.toFixed(2);
-    }, [formatterSpec]);
-    const lastFormattedValueRef = React.useRef(formatValue(persistenceValue));
-    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);
-    React.useEffect(() => {
-        const handleUnitSystemChanged = (() => {
-            setFormatterSpec(adjustFormatterSpec(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(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
-                setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-            }
-        });
-        IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [quantityType]);
-    const unitLabel = getUnitLabel(parserSpec);
-    // See if new initialValue props have changed since component mounted
-    React.useEffect(() => {
-        rawValueRef.current = persistenceValue;
-        const currentFormattedValue = formatValue(rawValueRef.current);
-        setFormattedValue(currentFormattedValue);
-    }, [formatValue, persistenceValue]);
-    // this is the unprocessed input from user, it is not processed until blur or enter key press
-    const handleDisplayValueChange = React.useCallback((event) => {
-        setFormattedValue(event.currentTarget.value);
-    }, []);
-    const updateValue = React.useCallback((newValue) => {
-        let persistedValue = newValue;
-        // istanbul ignore else
-        if (parserSpec) {
-            // convert value from display unit to persistence unit
-            const [unit] = parserSpec.format.units ? parserSpec.format.units[0] : /* istanbul ignore next */ [parserSpec.outUnit];
-            persistedValue = convertValueFromDisplayToPersistence(newValue, parserSpec.unitConversions, unit);
-            rawValueRef.current = persistedValue;
-        }
-        const newFormattedVal = formatValue(persistedValue);
-        onChange && onChange(persistedValue);
-        setFormattedValue(newFormattedVal);
-    }, [formatValue, onChange, parserSpec]);
-    /**
-   * Used internally to parse the argument x to it's numeric representation.
-   * If the argument cannot be converted to finite number returns 0; If a
-   * "precision" prop is specified uses it round the number with that
-   * precision (no fixed precision here because the return value is float, not
-   * string).
-   */
-    const parseInternal = React.useCallback((x) => {
-        if (!x)
-            return 0;
-        let n = parseFloat(x);
-        // istanbul ignore next
-        if (isNaN(n) || !isFinite(n)) {
-            n = 0;
-        }
-        const localPrecision = 6; // TODO get a reasonable value from format
-        const q = Math.pow(10, localPrecision);
-        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
-        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
-        n = Math.min(Math.max(n, localMin), localMax);
-        n = Math.round(n * q) / q;
-        return n;
-    }, [min, max]);
-    const updateValueFromString = React.useCallback((strValue) => {
-        // istanbul ignore else
-        if (parserSpec) {
-            const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);
-            // at this point we should have a string value in persistence units without a label
-            if (Parser.isParsedQuantity(parseResult)) {
-                const persistedValue = parseResult.value; // in persistence units
-                // set strValue and let it go through parseInternal which will ensure min/max limits are observed
-                strValue = formatValue(persistedValue);
-            }
-            else {
-                // istanbul ignore else
-                if (rawValueRef.current) { // restore last known good value
-                    const lastKnownFormattedVal = formatValue(rawValueRef.current);
-                    setFormattedValue(lastKnownFormattedVal);
-                    return;
-                }
-            }
-        }
-        const newValue = parseInternal(strValue);
-        // istanbul ignore else
-        if (undefined !== newValue)
-            updateValue(newValue);
-    }, [formatValue, parseInternal, parserSpec, updateValue]);
-    const handleBlur = React.useCallback((event) => {
-        const newVal = parseInternal(event.target.value);
-        onBlur && onBlur(event);
-        updateValue(newVal);
-    }, [parseInternal, updateValue, onBlur]);
-    const getIncrementValue = React.useCallback((increment) => {
-        if (typeof step === "function") {
-            const stepVal = step(increment ? "up" : "down");
-            return stepVal ? stepVal : 1;
-        }
-        return !step ? 1 : step;
-    }, [step]);
-    /**
-       * The internal method that actually sets the new value on the input
-       */
-    const applyStep = React.useCallback((increment) => {
-        const incrementValue = getIncrementValue(increment);
-        let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);
-        if (snap) {
-            num = Math.round(num / incrementValue) * incrementValue;
-        }
-        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
-        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
-        num = Math.min(Math.max(num, localMin), localMax);
-        updateValue(num);
-    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);
-    const handleKeyDown = React.useCallback((event) => {
-        // istanbul ignore else
-        if (event.key === SpecialKey.Enter) {
-            updateValueFromString(event.currentTarget.value);
-            event.preventDefault();
-        }
-        else if (event.key === SpecialKey.Escape) {
-            setFormattedValue(formatValue(rawValueRef.current));
-            event.preventDefault();
-        }
-        else if (event.key === SpecialKey.ArrowDown) {
-            applyStep(false);
-            event.preventDefault();
-        }
-        else if (event.key === SpecialKey.ArrowUp) {
-            applyStep(true);
-            event.preventDefault();
-        }
-        onKeyDown && onKeyDown(event);
-    }, [onKeyDown, updateValueFromString, formatValue, applyStep]);
-    const handleDownClick = React.useCallback((event) => {
-        applyStep(false);
-        event.preventDefault();
-    }, [applyStep]);
-    const handleUpClick = React.useCallback((event) => {
-        applyStep(true);
-        event.preventDefault();
-    }, [applyStep]);
-    // istanbul ignore next
-    const handleFocus = React.useCallback((event) => {
-        event.currentTarget.select();
-    }, []);
-    const isDisabled = !!otherProps.disabled;
-    const containerClasses = classnames("component-quantity-number-input-container", containerClassName, showTouchButtons && "component-number-buttons-for-touch", isDisabled && "component-quantity-number-input-disabled");
-    const caretUp = showTouchButtons ? React.createElement(SvgCaretUp, null) : React.createElement(SvgCaretUpSmall, null);
-    const caretDown = showTouchButtons ? React.createElement(SvgCaretDown, null) : React.createElement(SvgCaretDownSmall, null);
-    return (React.createElement("div", { className: containerClasses },
-        React.createElement("div", { className: "component-quantity-number-input-value-and-buttons-container" },
-            React.createElement(Input, { ref: ref, value: formattedValue, onChange: handleDisplayValueChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, size: "small", ...otherProps }),
-            React.createElement("div", { className: classnames("component-quantity-number-input-buttons-container", showTouchButtons && "component-number-buttons-for-touch") },
-                React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-up", tabIndex: -1, onClick: handleUpClick },
-                    React.createElement(Icon, { iconSpec: caretUp })),
-                React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-down", tabIndex: -1, onClick: handleDownClick },
-                    React.createElement(Icon, { iconSpec: caretDown })))),
-        React.createElement("span", { className: "component-quantity-number-input-suffix" }, unitLabel)));
-});
-/** 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 const QuantityNumberInput = ForwardRefQuantityNumberInput;
+/*---------------------------------------------------------------------------------------------
+* 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 "./QuantityNumberInput.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon } from "@itwin/core-react";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { IModelApp } from "@itwin/core-frontend";
+import { DecimalPrecision, FormatterSpec, FormatTraits, FormatType, Parser } from "@itwin/core-quantity";
+import { Input } from "@itwin/itwinui-react";
+import { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from "@itwin/itwinui-icons-react";
+/** adjust formatter spec to show only primary unit without a label.  */
+function adjustFormatterSpec(formatterSpec) {
+    if (undefined === formatterSpec)
+        return formatterSpec;
+    const singleUnitConversion = [];
+    singleUnitConversion.push(formatterSpec.unitConversions[0]);
+    const newFormat = formatterSpec.format.clone({
+        showOnlyPrimaryUnit: true,
+        traits: formatterSpec.format.formatTraits & ~FormatTraits.ShowUnitLabel,
+        type: FormatType.Decimal,
+        precision: FormatType.Decimal !== formatterSpec.format.type ? DecimalPrecision.Four : formatterSpec.format.precision,
+    });
+    return new FormatterSpec("single-value", newFormat, singleUnitConversion, formatterSpec.persistenceUnit);
+}
+function convertValueFromDisplayToPersistence(value, unitConversions, unit) {
+    // istanbul ignore next
+    if (!unitConversions || 0 === unitConversions.length)
+        return value;
+    const unitConversion = unitConversions.find((spec) => spec.name === unit.name);
+    // istanbul ignore next
+    if (!unitConversion)
+        return value;
+    const convertedValue = (value * unitConversion.conversion.factor) + unitConversion.conversion.offset;
+    return convertedValue;
+}
+function getUnitLabel(parserSpec) {
+    if (undefined === parserSpec)
+        return "";
+    const format = parserSpec.format;
+    // istanbul ignore else
+    if (!format.units || !format.units[0])
+        return parserSpec.outUnit.label;
+    const [unit, label] = format.units[0];
+    // istanbul ignore next
+    return label ?? unit.label;
+}
+const ForwardRefQuantityNumberInput = React.forwardRef(function ForwardRefQuantityNumberInput(props, ref) {
+    const { containerClassName, persistenceValue, min, max, onChange, onBlur, onKeyDown, step, snap, showTouchButtons, quantityType, ...otherProps } = props;
+    const rawValueRef = React.useRef(persistenceValue);
+    const [formatterSpec, setFormatterSpec] = React.useState(() => adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
+    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+    const formatValue = React.useCallback((value) => {
+        if (undefined === value)
+            return "";
+        // istanbul ignore else
+        if (formatterSpec) {
+            return formatterSpec.applyFormatting(value);
+        }
+        // istanbul ignore next
+        return value.toFixed(2);
+    }, [formatterSpec]);
+    const lastFormattedValueRef = React.useRef(formatValue(persistenceValue));
+    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);
+    React.useEffect(() => {
+        const handleUnitSystemChanged = (() => {
+            setFormatterSpec(adjustFormatterSpec(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(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
+                setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+            }
+        });
+        IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [quantityType]);
+    const unitLabel = getUnitLabel(parserSpec);
+    // See if new initialValue props have changed since component mounted
+    React.useEffect(() => {
+        rawValueRef.current = persistenceValue;
+        const currentFormattedValue = formatValue(rawValueRef.current);
+        setFormattedValue(currentFormattedValue);
+    }, [formatValue, persistenceValue]);
+    // this is the unprocessed input from user, it is not processed until blur or enter key press
+    const handleDisplayValueChange = React.useCallback((event) => {
+        setFormattedValue(event.currentTarget.value);
+    }, []);
+    const updateValue = React.useCallback((newValue) => {
+        let persistedValue = newValue;
+        // istanbul ignore else
+        if (parserSpec) {
+            // convert value from display unit to persistence unit
+            const [unit] = parserSpec.format.units ? parserSpec.format.units[0] : /* istanbul ignore next */ [parserSpec.outUnit];
+            persistedValue = convertValueFromDisplayToPersistence(newValue, parserSpec.unitConversions, unit);
+            rawValueRef.current = persistedValue;
+        }
+        const newFormattedVal = formatValue(persistedValue);
+        onChange && onChange(persistedValue);
+        setFormattedValue(newFormattedVal);
+    }, [formatValue, onChange, parserSpec]);
+    /**
+   * Used internally to parse the argument x to it's numeric representation.
+   * If the argument cannot be converted to finite number returns 0; If a
+   * "precision" prop is specified uses it round the number with that
+   * precision (no fixed precision here because the return value is float, not
+   * string).
+   */
+    const parseInternal = React.useCallback((x) => {
+        if (!x)
+            return 0;
+        let n = parseFloat(x);
+        // istanbul ignore next
+        if (isNaN(n) || !isFinite(n)) {
+            n = 0;
+        }
+        const localPrecision = 6; // TODO get a reasonable value from format
+        const q = Math.pow(10, localPrecision);
+        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
+        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
+        n = Math.min(Math.max(n, localMin), localMax);
+        n = Math.round(n * q) / q;
+        return n;
+    }, [min, max]);
+    const updateValueFromString = React.useCallback((strValue) => {
+        // istanbul ignore else
+        if (parserSpec) {
+            const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);
+            // at this point we should have a string value in persistence units without a label
+            if (Parser.isParsedQuantity(parseResult)) {
+                const persistedValue = parseResult.value; // in persistence units
+                // set strValue and let it go through parseInternal which will ensure min/max limits are observed
+                strValue = formatValue(persistedValue);
+            }
+            else {
+                // istanbul ignore else
+                if (rawValueRef.current) { // restore last known good value
+                    const lastKnownFormattedVal = formatValue(rawValueRef.current);
+                    setFormattedValue(lastKnownFormattedVal);
+                    return;
+                }
+            }
+        }
+        const newValue = parseInternal(strValue);
+        // istanbul ignore else
+        if (undefined !== newValue)
+            updateValue(newValue);
+    }, [formatValue, parseInternal, parserSpec, updateValue]);
+    const handleBlur = React.useCallback((event) => {
+        const newVal = parseInternal(event.target.value);
+        onBlur && onBlur(event);
+        updateValue(newVal);
+    }, [parseInternal, updateValue, onBlur]);
+    const getIncrementValue = React.useCallback((increment) => {
+        if (typeof step === "function") {
+            const stepVal = step(increment ? "up" : "down");
+            return stepVal ? stepVal : 1;
+        }
+        return !step ? 1 : step;
+    }, [step]);
+    /**
+       * The internal method that actually sets the new value on the input
+       */
+    const applyStep = React.useCallback((increment) => {
+        const incrementValue = getIncrementValue(increment);
+        let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);
+        if (snap) {
+            num = Math.round(num / incrementValue) * incrementValue;
+        }
+        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
+        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
+        num = Math.min(Math.max(num, localMin), localMax);
+        updateValue(num);
+    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);
+    const handleKeyDown = React.useCallback((event) => {
+        // istanbul ignore else
+        if (event.key === SpecialKey.Enter) {
+            updateValueFromString(event.currentTarget.value);
+            event.preventDefault();
+        }
+        else if (event.key === SpecialKey.Escape) {
+            setFormattedValue(formatValue(rawValueRef.current));
+            event.preventDefault();
+        }
+        else if (event.key === SpecialKey.ArrowDown) {
+            applyStep(false);
+            event.preventDefault();
+        }
+        else if (event.key === SpecialKey.ArrowUp) {
+            applyStep(true);
+            event.preventDefault();
+        }
+        onKeyDown && onKeyDown(event);
+    }, [onKeyDown, updateValueFromString, formatValue, applyStep]);
+    const handleDownClick = React.useCallback((event) => {
+        applyStep(false);
+        event.preventDefault();
+    }, [applyStep]);
+    const handleUpClick = React.useCallback((event) => {
+        applyStep(true);
+        event.preventDefault();
+    }, [applyStep]);
+    // istanbul ignore next
+    const handleFocus = React.useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    const isDisabled = !!otherProps.disabled;
+    const containerClasses = classnames("component-quantity-number-input-container", containerClassName, showTouchButtons && "component-number-buttons-for-touch", isDisabled && "component-quantity-number-input-disabled");
+    const caretUp = showTouchButtons ? React.createElement(SvgCaretUp, null) : React.createElement(SvgCaretUpSmall, null);
+    const caretDown = showTouchButtons ? React.createElement(SvgCaretDown, null) : React.createElement(SvgCaretDownSmall, null);
+    return (React.createElement("div", { className: containerClasses },
+        React.createElement("div", { className: "component-quantity-number-input-value-and-buttons-container" },
+            React.createElement(Input, { ref: ref, value: formattedValue, onChange: handleDisplayValueChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, size: "small", ...otherProps }),
+            React.createElement("div", { className: classnames("component-quantity-number-input-buttons-container", showTouchButtons && "component-number-buttons-for-touch") },
+                React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-up", tabIndex: -1, onClick: handleUpClick },
+                    React.createElement(Icon, { iconSpec: caretUp })),
+                React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-down", tabIndex: -1, onClick: handleDownClick },
+                    React.createElement(Icon, { iconSpec: caretDown })))),
+        React.createElement("span", { className: "component-quantity-number-input-suffix" }, unitLabel)));
+});
+/** 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 const QuantityNumberInput = ForwardRefQuantityNumberInput;
 //# sourceMappingURL=QuantityNumberInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuantityNumberInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"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","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 Inputs\r\n */\r\n\r\nimport \"./QuantityNumberInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\r\nimport { DecimalPrecision, FormatterSpec, FormatTraits, FormatType, Parser, ParserSpec, UnitConversionSpec, UnitProps } from \"@itwin/core-quantity\";\r\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\r\nimport { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Step function prototype for [[QuantityNumberInput]] component\r\n * @beta\r\n */\r\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\r\n\r\n/** Properties for the [[QuantityNumberInput]] component\r\n * @beta\r\n */\r\nexport interface QuantityNumberInputProps extends Omit<InputProps, \"value\" | \"min\" | \"max\" | \"step\" | \"onFocus\" | \"onChange\"> {\r\n  /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend).\r\n   * Set to `undefined` to show placeholder text */\r\n  persistenceValue?: number;\r\n  /** CSS class name for the QuantityNumberInput component container div */\r\n  containerClassName?: string;\r\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\r\n  min?: number;\r\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\r\n  max?: number;\r\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\r\n  step?: StepFunctionProp;\r\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\r\n  snap?: boolean;\r\n  /** Function to call when the quantity value is changed. The value returned will be in 'persistence' units. */\r\n  onChange?: (value: number) => void;\r\n  /** if true up/down buttons are shown larger and side by side */\r\n  showTouchButtons?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n  /** Type of quantity being input. */\r\n  quantityType: QuantityTypeArg;\r\n}\r\n\r\n/** adjust formatter spec to show only primary unit without a label.  */\r\nfunction adjustFormatterSpec(formatterSpec: FormatterSpec | undefined) {\r\n  if (undefined === formatterSpec)\r\n    return formatterSpec;\r\n  const singleUnitConversion: UnitConversionSpec[] = [];\r\n  singleUnitConversion.push(formatterSpec.unitConversions[0]);\r\n  const newFormat = formatterSpec.format.clone({\r\n    showOnlyPrimaryUnit: true,\r\n    traits: formatterSpec.format.formatTraits & ~FormatTraits.ShowUnitLabel,\r\n    type: FormatType.Decimal,\r\n    precision: FormatType.Decimal !== formatterSpec.format.type ? DecimalPrecision.Four : formatterSpec.format.precision,\r\n  });\r\n  return new FormatterSpec(\"single-value\", newFormat, singleUnitConversion, formatterSpec.persistenceUnit);\r\n}\r\n\r\nfunction convertValueFromDisplayToPersistence(value: number, unitConversions: UnitConversionSpec[] | undefined, unit: UnitProps) {\r\n  // istanbul ignore next\r\n  if (!unitConversions || 0 === unitConversions.length)\r\n    return value;\r\n\r\n  const unitConversion = unitConversions.find((spec) => spec.name === unit.name);\r\n  // istanbul ignore next\r\n  if (!unitConversion)\r\n    return value;\r\n\r\n  const convertedValue = (value * unitConversion.conversion.factor) + unitConversion.conversion.offset;\r\n  return convertedValue;\r\n}\r\n\r\nfunction getUnitLabel(parserSpec: ParserSpec | undefined) {\r\n  if (undefined === parserSpec)\r\n    return \"\";\r\n\r\n  const format = parserSpec.format;\r\n  // istanbul ignore else\r\n  if (!format.units || !format.units[0])\r\n    return parserSpec.outUnit.label;\r\n  const [unit, label] = format.units[0];\r\n  // istanbul ignore next\r\n  return label ?? unit.label;\r\n}\r\n\r\nconst ForwardRefQuantityNumberInput = React.forwardRef<HTMLInputElement, QuantityNumberInputProps>(\r\n  function ForwardRefQuantityNumberInput(props, ref) {\r\n\r\n    const { containerClassName, persistenceValue, min, max,\r\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, quantityType, ...otherProps } = props;\r\n    const rawValueRef = React.useRef(persistenceValue);\r\n\r\n    const [formatterSpec, setFormatterSpec] = React.useState(() => adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n\r\n    const formatValue = React.useCallback((value: number | undefined) => {\r\n      if (undefined === value)\r\n        return \"\";\r\n\r\n      // istanbul ignore else\r\n      if (formatterSpec) {\r\n        return formatterSpec.applyFormatting(value);\r\n      }\r\n      // istanbul ignore next\r\n      return value.toFixed(2);\r\n    }, [formatterSpec]);\r\n\r\n    const lastFormattedValueRef = React.useRef(formatValue(persistenceValue));\r\n    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);\r\n\r\n    React.useEffect(() => {\r\n      const handleUnitSystemChanged = ((): void => {\r\n        setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n        setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n      });\r\n\r\n      IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\r\n      return () => {\r\n        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\r\n      };\r\n    }, [quantityType]);\r\n\r\n    React.useEffect(() => {\r\n      const handleUnitSystemChanged = ((args: QuantityFormatsChangedArgs): void => {\r\n        const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);\r\n        // istanbul ignore else\r\n        if (args.quantityType === quantityKey) {\r\n          setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n          setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n        }\r\n      });\r\n\r\n      IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);\r\n      return () => {\r\n        IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);\r\n      };\r\n    }, [quantityType]);\r\n\r\n    const unitLabel = getUnitLabel(parserSpec);\r\n\r\n    // See if new initialValue props have changed since component mounted\r\n    React.useEffect(() => {\r\n      rawValueRef.current = persistenceValue;\r\n      const currentFormattedValue = formatValue(rawValueRef.current);\r\n      setFormattedValue(currentFormattedValue);\r\n    }, [formatValue, persistenceValue]);\r\n\r\n    // this is the unprocessed input from user, it is not processed until blur or enter key press\r\n    const handleDisplayValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n      setFormattedValue(event.currentTarget.value);\r\n    }, []);\r\n\r\n    const updateValue = React.useCallback((newValue: number) => {\r\n      let persistedValue = newValue;\r\n      // istanbul ignore else\r\n      if (parserSpec) {\r\n        // convert value from display unit to persistence unit\r\n        const [unit] = parserSpec.format.units ? parserSpec.format.units[0] : /* istanbul ignore next */[parserSpec.outUnit];\r\n        persistedValue = convertValueFromDisplayToPersistence(newValue, parserSpec.unitConversions, unit);\r\n        rawValueRef.current = persistedValue;\r\n      }\r\n      const newFormattedVal = formatValue(persistedValue);\r\n      onChange && onChange(persistedValue);\r\n      setFormattedValue(newFormattedVal);\r\n\r\n    }, [formatValue, onChange, parserSpec]);\r\n\r\n    /**\r\n   * Used internally to parse the argument x to it's numeric representation.\r\n   * If the argument cannot be converted to finite number returns 0; If a\r\n   * \"precision\" prop is specified uses it round the number with that\r\n   * precision (no fixed precision here because the return value is float, not\r\n   * string).\r\n   */\r\n    const parseInternal = React.useCallback((x: string | undefined) => {\r\n      if (!x)\r\n        return 0;\r\n\r\n      let n = parseFloat(x);\r\n      // istanbul ignore next\r\n      if (isNaN(n) || !isFinite(n)) {\r\n        n = 0;\r\n      }\r\n\r\n      const localPrecision = 6; // TODO get a reasonable value from format\r\n      const q = Math.pow(10, localPrecision);\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      n = Math.min(Math.max(n, localMin), localMax);\r\n      n = Math.round(n * q) / q;\r\n\r\n      return n;\r\n    }, [min, max]);\r\n\r\n    const updateValueFromString = React.useCallback((strValue: string) => {\r\n      // istanbul ignore else\r\n      if (parserSpec) {\r\n        const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);\r\n        // at this point we should have a string value in persistence units without a label\r\n        if (Parser.isParsedQuantity(parseResult)) {\r\n          const persistedValue = parseResult.value;  // in persistence units\r\n          // set strValue and let it go through parseInternal which will ensure min/max limits are observed\r\n          strValue = formatValue(persistedValue)!;\r\n        } else {\r\n          // istanbul ignore else\r\n          if (rawValueRef.current) { // restore last known good value\r\n            const lastKnownFormattedVal = formatValue(rawValueRef.current);\r\n            setFormattedValue(lastKnownFormattedVal);\r\n            return;\r\n          }\r\n        }\r\n      }\r\n      const newValue = parseInternal(strValue);\r\n      // istanbul ignore else\r\n      if (undefined !== newValue)\r\n        updateValue(newValue);\r\n    }, [formatValue, parseInternal, parserSpec, updateValue]);\r\n\r\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      const newVal = parseInternal(event.target.value);\r\n      onBlur && onBlur(event);\r\n      updateValue(newVal);\r\n    }, [parseInternal, updateValue, onBlur]);\r\n\r\n    const getIncrementValue = React.useCallback((increment: boolean) => {\r\n      if (typeof step === \"function\") {\r\n        const stepVal = step(increment ? \"up\" : \"down\");\r\n        return stepVal ? stepVal : 1;\r\n      }\r\n\r\n      return !step ? 1 : step;\r\n    }, [step]);\r\n\r\n    /**\r\n       * The internal method that actually sets the new value on the input\r\n       */\r\n    const applyStep = React.useCallback((increment: boolean) => {\r\n      const incrementValue = getIncrementValue(increment);\r\n\r\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\r\n      if (snap) {\r\n        num = Math.round(num / incrementValue) * incrementValue;\r\n      }\r\n\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      num = Math.min(Math.max(num, localMin), localMax);\r\n\r\n      updateValue(num);\r\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\r\n\r\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      // istanbul ignore else\r\n      if (event.key === SpecialKey.Enter) {\r\n        updateValueFromString(event.currentTarget.value);\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.Escape) {\r\n        setFormattedValue(formatValue(rawValueRef.current));\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowDown) {\r\n        applyStep(false);\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowUp) {\r\n        applyStep(true);\r\n        event.preventDefault();\r\n      }\r\n      onKeyDown && onKeyDown(event);\r\n    }, [onKeyDown, updateValueFromString, formatValue, applyStep]);\r\n\r\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(false);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(true);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    // istanbul ignore next\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    const isDisabled = !!otherProps.disabled;\r\n    const containerClasses = classnames(\"component-quantity-number-input-container\",\r\n      containerClassName, showTouchButtons && \"component-number-buttons-for-touch\",\r\n      isDisabled && \"component-quantity-number-input-disabled\",\r\n    );\r\n\r\n    const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\r\n    const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\r\n\r\n    return (\r\n      <div className={containerClasses} >\r\n        <div className=\"component-quantity-number-input-value-and-buttons-container\">\r\n          <Input ref={ref} value={formattedValue} onChange={handleDisplayValueChange} onKeyDown={handleKeyDown}\r\n            onBlur={handleBlur} onFocus={handleFocus} size=\"small\" {...otherProps} />\r\n          <div className={classnames(\"component-quantity-number-input-buttons-container\", showTouchButtons && \"component-number-buttons-for-touch\")}>\r\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-up\" tabIndex={-1} onClick={handleUpClick}>\r\n              <Icon iconSpec={caretUp} />\r\n            </div>\r\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-down\" tabIndex={-1} onClick={handleDownClick}>\r\n              <Icon iconSpec={caretDown} />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <span className=\"component-quantity-number-input-suffix\">{unitLabel}</span>\r\n      </div >\r\n    );\r\n  }\r\n);\r\n\r\n/** The QuantityNumberInput component accepts input for quantity values. The quantity value is shown as a single numeric value and the quantity's\r\n * \"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).\r\n * The control also display buttons to increment and decrement the \"displayed\" value. The value reported by via the onChange function is in \"persistence\"\r\n * units that can be stored in the iModel.\r\n * @beta\r\n */\r\nexport const QuantityNumberInput: (props: QuantityNumberInputProps) => JSX.Element | null = ForwardRefQuantityNumberInput;\r\n"]}
+{"version":3,"file":"QuantityNumberInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport \"./QuantityNumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\nimport { DecimalPrecision, FormatterSpec, FormatTraits, FormatType, Parser, ParserSpec, UnitConversionSpec, UnitProps } from \"@itwin/core-quantity\";\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\nimport { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\n\n/** Step function prototype for [[QuantityNumberInput]] component\n * @beta\n */\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\n\n/** Properties for the [[QuantityNumberInput]] component\n * @beta\n */\nexport interface QuantityNumberInputProps extends Omit<InputProps, \"value\" | \"min\" | \"max\" | \"step\" | \"onFocus\" | \"onChange\"> {\n  /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend).\n   * Set to `undefined` to show placeholder text */\n  persistenceValue?: number;\n  /** CSS class name for the QuantityNumberInput component container div */\n  containerClassName?: string;\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\n  min?: number;\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n  max?: number;\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n  step?: StepFunctionProp;\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n  snap?: boolean;\n  /** Function to call when the quantity value is changed. The value returned will be in 'persistence' units. */\n  onChange?: (value: number) => void;\n  /** if true up/down buttons are shown larger and side by side */\n  showTouchButtons?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /** Type of quantity being input. */\n  quantityType: QuantityTypeArg;\n}\n\n/** adjust formatter spec to show only primary unit without a label.  */\nfunction adjustFormatterSpec(formatterSpec: FormatterSpec | undefined) {\n  if (undefined === formatterSpec)\n    return formatterSpec;\n  const singleUnitConversion: UnitConversionSpec[] = [];\n  singleUnitConversion.push(formatterSpec.unitConversions[0]);\n  const newFormat = formatterSpec.format.clone({\n    showOnlyPrimaryUnit: true,\n    traits: formatterSpec.format.formatTraits & ~FormatTraits.ShowUnitLabel,\n    type: FormatType.Decimal,\n    precision: FormatType.Decimal !== formatterSpec.format.type ? DecimalPrecision.Four : formatterSpec.format.precision,\n  });\n  return new FormatterSpec(\"single-value\", newFormat, singleUnitConversion, formatterSpec.persistenceUnit);\n}\n\nfunction convertValueFromDisplayToPersistence(value: number, unitConversions: UnitConversionSpec[] | undefined, unit: UnitProps) {\n  // istanbul ignore next\n  if (!unitConversions || 0 === unitConversions.length)\n    return value;\n\n  const unitConversion = unitConversions.find((spec) => spec.name === unit.name);\n  // istanbul ignore next\n  if (!unitConversion)\n    return value;\n\n  const convertedValue = (value * unitConversion.conversion.factor) + unitConversion.conversion.offset;\n  return convertedValue;\n}\n\nfunction getUnitLabel(parserSpec: ParserSpec | undefined) {\n  if (undefined === parserSpec)\n    return \"\";\n\n  const format = parserSpec.format;\n  // istanbul ignore else\n  if (!format.units || !format.units[0])\n    return parserSpec.outUnit.label;\n  const [unit, label] = format.units[0];\n  // istanbul ignore next\n  return label ?? unit.label;\n}\n\nconst ForwardRefQuantityNumberInput = React.forwardRef<HTMLInputElement, QuantityNumberInputProps>(\n  function ForwardRefQuantityNumberInput(props, ref) {\n\n    const { containerClassName, persistenceValue, min, max,\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, quantityType, ...otherProps } = props;\n    const rawValueRef = React.useRef(persistenceValue);\n\n    const [formatterSpec, setFormatterSpec] = React.useState(() => adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\n    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n\n    const formatValue = React.useCallback((value: number | undefined) => {\n      if (undefined === value)\n        return \"\";\n\n      // istanbul ignore else\n      if (formatterSpec) {\n        return formatterSpec.applyFormatting(value);\n      }\n      // istanbul ignore next\n      return value.toFixed(2);\n    }, [formatterSpec]);\n\n    const lastFormattedValueRef = React.useRef(formatValue(persistenceValue));\n    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);\n\n    React.useEffect(() => {\n      const handleUnitSystemChanged = ((): void => {\n        setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\n        setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n      });\n\n      IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\n      return () => {\n        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\n      };\n    }, [quantityType]);\n\n    React.useEffect(() => {\n      const handleUnitSystemChanged = ((args: QuantityFormatsChangedArgs): void => {\n        const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);\n        // istanbul ignore else\n        if (args.quantityType === quantityKey) {\n          setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\n          setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n        }\n      });\n\n      IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);\n      return () => {\n        IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);\n      };\n    }, [quantityType]);\n\n    const unitLabel = getUnitLabel(parserSpec);\n\n    // See if new initialValue props have changed since component mounted\n    React.useEffect(() => {\n      rawValueRef.current = persistenceValue;\n      const currentFormattedValue = formatValue(rawValueRef.current);\n      setFormattedValue(currentFormattedValue);\n    }, [formatValue, persistenceValue]);\n\n    // this is the unprocessed input from user, it is not processed until blur or enter key press\n    const handleDisplayValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n      setFormattedValue(event.currentTarget.value);\n    }, []);\n\n    const updateValue = React.useCallback((newValue: number) => {\n      let persistedValue = newValue;\n      // istanbul ignore else\n      if (parserSpec) {\n        // convert value from display unit to persistence unit\n        const [unit] = parserSpec.format.units ? parserSpec.format.units[0] : /* istanbul ignore next */[parserSpec.outUnit];\n        persistedValue = convertValueFromDisplayToPersistence(newValue, parserSpec.unitConversions, unit);\n        rawValueRef.current = persistedValue;\n      }\n      const newFormattedVal = formatValue(persistedValue);\n      onChange && onChange(persistedValue);\n      setFormattedValue(newFormattedVal);\n\n    }, [formatValue, onChange, parserSpec]);\n\n    /**\n   * Used internally to parse the argument x to it's numeric representation.\n   * If the argument cannot be converted to finite number returns 0; If a\n   * \"precision\" prop is specified uses it round the number with that\n   * precision (no fixed precision here because the return value is float, not\n   * string).\n   */\n    const parseInternal = React.useCallback((x: string | undefined) => {\n      if (!x)\n        return 0;\n\n      let n = parseFloat(x);\n      // istanbul ignore next\n      if (isNaN(n) || !isFinite(n)) {\n        n = 0;\n      }\n\n      const localPrecision = 6; // TODO get a reasonable value from format\n      const q = Math.pow(10, localPrecision);\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      n = Math.min(Math.max(n, localMin), localMax);\n      n = Math.round(n * q) / q;\n\n      return n;\n    }, [min, max]);\n\n    const updateValueFromString = React.useCallback((strValue: string) => {\n      // istanbul ignore else\n      if (parserSpec) {\n        const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);\n        // at this point we should have a string value in persistence units without a label\n        if (Parser.isParsedQuantity(parseResult)) {\n          const persistedValue = parseResult.value;  // in persistence units\n          // set strValue and let it go through parseInternal which will ensure min/max limits are observed\n          strValue = formatValue(persistedValue)!;\n        } else {\n          // istanbul ignore else\n          if (rawValueRef.current) { // restore last known good value\n            const lastKnownFormattedVal = formatValue(rawValueRef.current);\n            setFormattedValue(lastKnownFormattedVal);\n            return;\n          }\n        }\n      }\n      const newValue = parseInternal(strValue);\n      // istanbul ignore else\n      if (undefined !== newValue)\n        updateValue(newValue);\n    }, [formatValue, parseInternal, parserSpec, updateValue]);\n\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      const newVal = parseInternal(event.target.value);\n      onBlur && onBlur(event);\n      updateValue(newVal);\n    }, [parseInternal, updateValue, onBlur]);\n\n    const getIncrementValue = React.useCallback((increment: boolean) => {\n      if (typeof step === \"function\") {\n        const stepVal = step(increment ? \"up\" : \"down\");\n        return stepVal ? stepVal : 1;\n      }\n\n      return !step ? 1 : step;\n    }, [step]);\n\n    /**\n       * The internal method that actually sets the new value on the input\n       */\n    const applyStep = React.useCallback((increment: boolean) => {\n      const incrementValue = getIncrementValue(increment);\n\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\n      if (snap) {\n        num = Math.round(num / incrementValue) * incrementValue;\n      }\n\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      num = Math.min(Math.max(num, localMin), localMax);\n\n      updateValue(num);\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\n\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n      // istanbul ignore else\n      if (event.key === SpecialKey.Enter) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n      } else if (event.key === SpecialKey.Escape) {\n        setFormattedValue(formatValue(rawValueRef.current));\n        event.preventDefault();\n      } else if (event.key === SpecialKey.ArrowDown) {\n        applyStep(false);\n        event.preventDefault();\n      } else if (event.key === SpecialKey.ArrowUp) {\n        applyStep(true);\n        event.preventDefault();\n      }\n      onKeyDown && onKeyDown(event);\n    }, [onKeyDown, updateValueFromString, formatValue, applyStep]);\n\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(false);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(true);\n      event.preventDefault();\n    }, [applyStep]);\n\n    // istanbul ignore next\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      event.currentTarget.select();\n    }, []);\n\n    const isDisabled = !!otherProps.disabled;\n    const containerClasses = classnames(\"component-quantity-number-input-container\",\n      containerClassName, showTouchButtons && \"component-number-buttons-for-touch\",\n      isDisabled && \"component-quantity-number-input-disabled\",\n    );\n\n    const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\n    const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\n\n    return (\n      <div className={containerClasses} >\n        <div className=\"component-quantity-number-input-value-and-buttons-container\">\n          <Input ref={ref} value={formattedValue} onChange={handleDisplayValueChange} onKeyDown={handleKeyDown}\n            onBlur={handleBlur} onFocus={handleFocus} size=\"small\" {...otherProps} />\n          <div className={classnames(\"component-quantity-number-input-buttons-container\", showTouchButtons && \"component-number-buttons-for-touch\")}>\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-up\" tabIndex={-1} onClick={handleUpClick}>\n              <Icon iconSpec={caretUp} />\n            </div>\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-down\" tabIndex={-1} onClick={handleDownClick}>\n              <Icon iconSpec={caretDown} />\n            </div>\n          </div>\n        </div>\n        <span className=\"component-quantity-number-input-suffix\">{unitLabel}</span>\n      </div >\n    );\n  }\n);\n\n/** The QuantityNumberInput component accepts input for quantity values. The quantity value is shown as a single numeric value and the quantity's\n * \"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).\n * The control also display buttons to increment and decrement the \"displayed\" value. The value reported by via the onChange function is in \"persistence\"\n * units that can be stored in the iModel.\n * @beta\n */\nexport const QuantityNumberInput: (props: QuantityNumberInputProps) => JSX.Element | null = ForwardRefQuantityNumberInput;\n"]}