@itwin/imodel-components-react 3.7.0-dev.8 → 3.7.1

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

@@ -1,97 +1,97 @@
-"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.QuantityInput = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_frontend_1 = require("@itwin/core-frontend");
-const core_quantity_1 = require("@itwin/core-quantity");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-const components_react_1 = require("@itwin/components-react");
-/** Input control that allows users to input a quantity and show the formatted string that represents the value.
- * @beta
- */
-function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }) {
-    const [formatterSpec, setFormatterSpec] = React.useState(() => core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-    const [parserSpec, setParserSpec] = React.useState(() => core_frontend_1.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 = core_frontend_1.IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);
-            // istanbul ignore else
-            if (core_quantity_1.Parser.isParsedQuantity(parseResult)) {
-                return { value: parseResult.value };
-            }
-            else {
-                const statusId = core_quantity_1.Parser.isParseError(parseResult) ? parseResult.error.toString() : "Unknown";
-                return { parseError: `${UiIModelComponents_1.UiIModelComponents.translate("QuantityInput.NoParserDefined")}${statusId}` };
-            }
-        }
-        // istanbul ignore next
-        return { parseError: UiIModelComponents_1.UiIModelComponents.translate("QuantityInput.NoParserDefined") };
-    }, [parserSpec]);
-    const classNames = (0, classnames_1.default)(className, "components-quantity-input");
-    React.useEffect(() => {
-        const handleUnitSystemChanged = (() => {
-            setFormatterSpec(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(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]);
-    return React.createElement(components_react_1.ParsedInput, { "data-testid": "components-quantity-input", ref: ref, style: style, className: classNames, onChange: onQuantityChange, initialValue: initialValue, readonly: readonly, formatValue: formatValue, parseString: parseString });
-}
-exports.QuantityInput = QuantityInput;
+"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.QuantityInput = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_frontend_1 = require("@itwin/core-frontend");
+const core_quantity_1 = require("@itwin/core-quantity");
+const UiIModelComponents_1 = require("../UiIModelComponents");
+const components_react_1 = require("@itwin/components-react");
+/** Input control that allows users to input a quantity and show the formatted string that represents the value.
+ * @beta
+ */
+function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }) {
+    const [formatterSpec, setFormatterSpec] = React.useState(() => core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+    const [parserSpec, setParserSpec] = React.useState(() => core_frontend_1.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 = core_frontend_1.IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);
+            // istanbul ignore else
+            if (core_quantity_1.Parser.isParsedQuantity(parseResult)) {
+                return { value: parseResult.value };
+            }
+            else {
+                const statusId = core_quantity_1.Parser.isParseError(parseResult) ? parseResult.error.toString() : "Unknown";
+                return { parseError: `${UiIModelComponents_1.UiIModelComponents.translate("QuantityInput.NoParserDefined")}${statusId}` };
+            }
+        }
+        // istanbul ignore next
+        return { parseError: UiIModelComponents_1.UiIModelComponents.translate("QuantityInput.NoParserDefined") };
+    }, [parserSpec]);
+    const classNames = (0, classnames_1.default)(className, "components-quantity-input");
+    React.useEffect(() => {
+        const handleUnitSystemChanged = (() => {
+            setFormatterSpec(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(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]);
+    return React.createElement(components_react_1.ParsedInput, { "data-testid": "components-quantity-input", ref: ref, style: style, className: classNames, onChange: onQuantityChange, initialValue: initialValue, readonly: readonly, formatValue: formatValue, parseString: parseString });
+}
+exports.QuantityInput = QuantityInput;
 //# sourceMappingURL=QuantityInput.js.map

package/lib/cjs/imodel-components-react/inputs/QuantityInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityInput.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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\nimport { Parser } from \"@itwin/core-quantity\";\nimport { ParseResults } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { ParsedInput } from \"@itwin/components-react\";\n\n/** Props for [[QuantityInput]] control\n * @beta\n */\nexport interface QuantityProps extends CommonProps {\n  /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */\n  initialValue: number;\n  /** Type of quantity being input. */\n  quantityType: QuantityTypeArg;\n  /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */\n  onQuantityChange: (newQuantityValue: number) => void;\n  /** Set to `true` if value is for display only */\n  readonly?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n/** Input control that allows users to input a quantity and show the formatted string that represents the value.\n * @beta\n */\nexport function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps) {\n  const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n  const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n\n  const formatValue = React.useCallback((value: number) => {\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 parseString = React.useCallback((userInput: string): ParseResults => {\n    // istanbul ignore else\n    if (parserSpec) {\n      const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);\n      // istanbul ignore else\n      if (Parser.isParsedQuantity(parseResult)) {\n        return { value: parseResult.value };\n      } else {\n        const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : \"Unknown\";\n        return { parseError: `${UiIModelComponents.translate(\"QuantityInput.NoParserDefined\")}${statusId}` };\n      }\n    }\n    // istanbul ignore next\n    return { parseError: UiIModelComponents.translate(\"QuantityInput.NoParserDefined\") };\n  }, [parserSpec]);\n\n  const classNames = classnames(className, \"components-quantity-input\");\n\n  React.useEffect(() => {\n    const handleUnitSystemChanged = ((): void => {\n      setFormatterSpec(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(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  return <ParsedInput data-testid=\"components-quantity-input\" ref={ref} style={style} className={classNames}\n    onChange={onQuantityChange} initialValue={initialValue} readonly={readonly} formatValue={formatValue} parseString={parseString} />;\n}\n"]}
+{"version":3,"file":"QuantityInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityInput.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 classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\r\nimport { Parser } from \"@itwin/core-quantity\";\r\nimport { ParseResults } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { ParsedInput } from \"@itwin/components-react\";\r\n\r\n/** Props for [[QuantityInput]] control\r\n * @beta\r\n */\r\nexport interface QuantityProps extends CommonProps {\r\n  /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */\r\n  initialValue: number;\r\n  /** Type of quantity being input. */\r\n  quantityType: QuantityTypeArg;\r\n  /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */\r\n  onQuantityChange: (newQuantityValue: number) => void;\r\n  /** Set to `true` if value is for display only */\r\n  readonly?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n/** Input control that allows users to input a quantity and show the formatted string that represents the value.\r\n * @beta\r\n */\r\nexport function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps) {\r\n  const [formatterSpec, setFormatterSpec] = React.useState(() => 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) => {\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 parseString = React.useCallback((userInput: string): ParseResults => {\r\n    // istanbul ignore else\r\n    if (parserSpec) {\r\n      const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);\r\n      // istanbul ignore else\r\n      if (Parser.isParsedQuantity(parseResult)) {\r\n        return { value: parseResult.value };\r\n      } else {\r\n        const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : \"Unknown\";\r\n        return { parseError: `${UiIModelComponents.translate(\"QuantityInput.NoParserDefined\")}${statusId}` };\r\n      }\r\n    }\r\n    // istanbul ignore next\r\n    return { parseError: UiIModelComponents.translate(\"QuantityInput.NoParserDefined\") };\r\n  }, [parserSpec]);\r\n\r\n  const classNames = classnames(className, \"components-quantity-input\");\r\n\r\n  React.useEffect(() => {\r\n    const handleUnitSystemChanged = ((): void => {\r\n      setFormatterSpec(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(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  return <ParsedInput data-testid=\"components-quantity-input\" ref={ref} style={style} className={classNames}\r\n    onChange={onQuantityChange} initialValue={initialValue} readonly={readonly} formatValue={formatValue} parseString={parseString} />;\r\n}\r\n"]}

package/lib/cjs/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 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;
 //# sourceMappingURL=QuantityNumberInput.d.ts.map