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

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

@@ -1,266 +1,266 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Inputs
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuantityNumberInput = void 0;
-require("./QuantityNumberInput.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_react_1 = require("@itwin/core-react");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_frontend_1 = require("@itwin/core-frontend");
-const core_quantity_1 = require("@itwin/core-quantity");
-const itwinui_react_1 = require("@itwin/itwinui-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 & ~core_quantity_1.FormatTraits.ShowUnitLabel,
-        type: core_quantity_1.FormatType.Decimal,
-        precision: core_quantity_1.FormatType.Decimal !== formatterSpec.format.type ? core_quantity_1.DecimalPrecision.Four : formatterSpec.format.precision,
-    });
-    return new core_quantity_1.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(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
-    const [parserSpec, setParserSpec] = React.useState(() => core_frontend_1.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(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
-            setParserSpec(core_frontend_1.IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-        });
-        core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [quantityType]);
-    React.useEffect(() => {
-        const handleUnitSystemChanged = ((args) => {
-            const quantityKey = core_frontend_1.IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);
-            // istanbul ignore else
-            if (args.quantityType === quantityKey) {
-                setFormatterSpec(adjustFormatterSpec(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
-                setParserSpec(core_frontend_1.IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-            }
-        });
-        core_frontend_1.IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            core_frontend_1.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 = core_frontend_1.IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);
-            // at this point we should have a string value in persistence units without a label
-            if (core_quantity_1.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 === appui_abstract_1.SpecialKey.Enter) {
-            updateValueFromString(event.currentTarget.value);
-            event.preventDefault();
-        }
-        else if (event.key === appui_abstract_1.SpecialKey.Escape) {
-            setFormattedValue(formatValue(rawValueRef.current));
-            event.preventDefault();
-        }
-        else if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
-            applyStep(false);
-            event.preventDefault();
-        }
-        else if (event.key === appui_abstract_1.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 = (0, classnames_1.default)("component-quantity-number-input-container", containerClassName, showTouchButtons && "component-number-buttons-for-touch", isDisabled && "component-quantity-number-input-disabled");
-    return (React.createElement("div", { className: containerClasses },
-        React.createElement("div", { className: "component-quantity-number-input-value-and-buttons-container" },
-            React.createElement(itwinui_react_1.Input, { ref: ref, value: formattedValue, onChange: handleDisplayValueChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, size: "small", ...otherProps }),
-            React.createElement("div", { className: (0, classnames_1.default)("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(core_react_1.WebFontIcon, { iconName: "icon-caret-up" })),
-                React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-down", tabIndex: -1, onClick: handleDownClick },
-                    React.createElement(core_react_1.WebFontIcon, { iconName: "icon-caret-down" })))),
-        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
- */
-exports.QuantityNumberInput = ForwardRefQuantityNumberInput;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuantityNumberInput = void 0;
+require("./QuantityNumberInput.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_frontend_1 = require("@itwin/core-frontend");
+const core_quantity_1 = require("@itwin/core-quantity");
+const itwinui_react_1 = require("@itwin/itwinui-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 & ~core_quantity_1.FormatTraits.ShowUnitLabel,
+        type: core_quantity_1.FormatType.Decimal,
+        precision: core_quantity_1.FormatType.Decimal !== formatterSpec.format.type ? core_quantity_1.DecimalPrecision.Four : formatterSpec.format.precision,
+    });
+    return new core_quantity_1.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(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
+    const [parserSpec, setParserSpec] = React.useState(() => core_frontend_1.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(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
+            setParserSpec(core_frontend_1.IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+        });
+        core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [quantityType]);
+    React.useEffect(() => {
+        const handleUnitSystemChanged = ((args) => {
+            const quantityKey = core_frontend_1.IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);
+            // istanbul ignore else
+            if (args.quantityType === quantityKey) {
+                setFormatterSpec(adjustFormatterSpec(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));
+                setParserSpec(core_frontend_1.IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+            }
+        });
+        core_frontend_1.IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            core_frontend_1.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 = core_frontend_1.IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);
+            // at this point we should have a string value in persistence units without a label
+            if (core_quantity_1.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 === appui_abstract_1.SpecialKey.Enter) {
+            updateValueFromString(event.currentTarget.value);
+            event.preventDefault();
+        }
+        else if (event.key === appui_abstract_1.SpecialKey.Escape) {
+            setFormattedValue(formatValue(rawValueRef.current));
+            event.preventDefault();
+        }
+        else if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
+            applyStep(false);
+            event.preventDefault();
+        }
+        else if (event.key === appui_abstract_1.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 = (0, classnames_1.default)("component-quantity-number-input-container", containerClassName, showTouchButtons && "component-number-buttons-for-touch", isDisabled && "component-quantity-number-input-disabled");
+    return (React.createElement("div", { className: containerClasses },
+        React.createElement("div", { className: "component-quantity-number-input-value-and-buttons-container" },
+            React.createElement(itwinui_react_1.Input, { ref: ref, value: formattedValue, onChange: handleDisplayValueChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, size: "small", ...otherProps }),
+            React.createElement("div", { className: (0, classnames_1.default)("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(core_react_1.WebFontIcon, { iconName: "icon-caret-up" })),
+                React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-down", tabIndex: -1, onClick: handleDownClick },
+                    React.createElement(core_react_1.WebFontIcon, { iconName: "icon-caret-down" })))),
+        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
+ */
+exports.QuantityNumberInput = ForwardRefQuantityNumberInput;
 //# sourceMappingURL=QuantityNumberInput.js.map