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

package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.d.ts

@@ -1,27 +1,27 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-import "./FormatPanel.scss";
-import * as React from "react";
-import { FormatProps, FormatterSpec, UnitProps, UnitsProvider } from "@itwin/core-quantity";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[FormatPanel]] component.
- * @alpha
- */
-export interface FormatPanelProps extends CommonProps {
-    initialFormat: FormatProps;
-    unitsProvider: UnitsProvider;
-    persistenceUnit: Promise<UnitProps> | UnitProps;
-    showSample?: boolean;
-    initialMagnitude?: number;
-    enableMinimumProperties?: boolean;
-    onFormatChange?: (format: FormatProps) => void;
-    provideFormatSpec?: (formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) => Promise<FormatterSpec>;
-    providePrimaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;
-    provideSecondaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;
-}
-/** Component to show/edit Quantity Format.
- * @alpha
- */
-export declare function FormatPanel(props: FormatPanelProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import "./FormatPanel.scss";
+import * as React from "react";
+import { FormatProps, FormatterSpec, UnitProps, UnitsProvider } from "@itwin/core-quantity";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[FormatPanel]] component.
+ * @alpha
+ */
+export interface FormatPanelProps extends CommonProps {
+    initialFormat: FormatProps;
+    unitsProvider: UnitsProvider;
+    persistenceUnit: Promise<UnitProps> | UnitProps;
+    showSample?: boolean;
+    initialMagnitude?: number;
+    enableMinimumProperties?: boolean;
+    onFormatChange?: (format: FormatProps) => void;
+    provideFormatSpec?: (formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) => Promise<FormatterSpec>;
+    providePrimaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;
+    provideSecondaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;
+}
+/** Component to show/edit Quantity Format.
+ * @alpha
+ */
+export declare function FormatPanel(props: FormatPanelProps): JSX.Element;
 //# sourceMappingURL=FormatPanel.d.ts.map

package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.js

@@ -1,100 +1,104 @@
-"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 QuantityFormat
- */
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatPanel = void 0;
-require("./FormatPanel.scss");
-const React = __importStar(require("react"));
-const core_quantity_1 = require("@itwin/core-quantity");
-const FormatPrecision_1 = require("./FormatPrecision");
-const FormatSample_1 = require("./FormatSample");
-const FormatType_1 = require("./FormatType");
-const FormatUnitLabel_1 = require("./FormatUnitLabel");
-const FormatUnits_1 = require("./FormatUnits");
-const MiscFormatOptions_1 = require("./MiscFormatOptions");
-async function generateFormatSpec(formatProps, persistenceUnit, unitsProvider) {
-    const actualFormat = await core_quantity_1.Format.createFromJSON("custom", unitsProvider, formatProps);
-    return core_quantity_1.FormatterSpec.create(actualFormat.name, actualFormat, unitsProvider, persistenceUnit);
-}
-/** Component to show/edit Quantity Format.
- * @alpha
- */
-function FormatPanel(props) {
-    const [formatSpec, setFormatSpec] = React.useState();
-    const { initialFormat, showSample, initialMagnitude, unitsProvider, persistenceUnit, onFormatChange, provideFormatSpec, enableMinimumProperties } = props;
-    const [formatProps, setFormatProps] = React.useState(initialFormat);
-    const [showOptions, setShowOptions] = React.useState(false);
-    React.useEffect(() => {
-        setFormatProps(initialFormat);
-        setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook
-    }, [initialFormat]);
-    const handleUserFormatChanges = React.useCallback((newProps) => {
-        setFormatProps(newProps);
-        setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook
-        onFormatChange && onFormatChange(newProps);
-    }, [onFormatChange]);
-    const isMounted = React.useRef(false);
-    // runs returned function only when component is unmounted.
-    React.useEffect(() => {
-        isMounted.current = true;
-        return (() => {
-            isMounted.current = false;
-        });
-    }, []);
-    React.useEffect(() => {
-        async function fetchFormatSpec() {
-            const pu = await persistenceUnit;
-            let newFormatSpec;
-            if (provideFormatSpec) {
-                newFormatSpec = await provideFormatSpec(formatProps, pu, unitsProvider);
-            }
-            else {
-                newFormatSpec = await generateFormatSpec(formatProps, pu, unitsProvider);
-            }
-            isMounted.current && setFormatSpec(newFormatSpec);
-        }
-        if (!formatSpec)
-            fetchFormatSpec(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }, [formatProps, formatSpec, persistenceUnit, provideFormatSpec, unitsProvider]);
-    const handleFormatChange = React.useCallback((newFormatProps) => {
-        handleUserFormatChanges(newFormatProps);
-    }, [handleUserFormatChanges]);
-    const handleShowOptions = React.useCallback((show) => {
-        setShowOptions(show);
-    }, []);
-    return (React.createElement("div", { className: "components-quantityFormat-panel" },
-        showSample &&
-            React.createElement(FormatSample_1.FormatSample, { formatSpec: formatSpec, initialMagnitude: initialMagnitude }),
-        React.createElement(FormatUnits_1.FormatUnits, { unitsProvider: unitsProvider, persistenceUnit: formatSpec === null || formatSpec === void 0 ? void 0 : formatSpec.persistenceUnit, initialFormat: formatProps, onUnitsChange: handleFormatChange }),
-        React.createElement(FormatUnitLabel_1.FormatUnitLabel, { formatProps: formatProps, onUnitLabelChange: handleFormatChange }),
-        React.createElement(FormatType_1.FormatTypeOption, { formatProps: formatProps, onChange: handleFormatChange }),
-        React.createElement(FormatPrecision_1.FormatPrecision, { formatProps: formatProps, onChange: handleFormatChange }),
-        props.providePrimaryChildren && props.providePrimaryChildren(formatProps, handleFormatChange),
-        React.createElement(MiscFormatOptions_1.MiscFormatOptions, { formatProps: formatProps, onChange: handleFormatChange, enableMinimumProperties: enableMinimumProperties, showOptions: showOptions, onShowHideOptions: handleShowOptions }, props.provideSecondaryChildren && props.provideSecondaryChildren(formatProps, handleFormatChange))));
-}
-exports.FormatPanel = FormatPanel;
+"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 QuantityFormat
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatPanel = void 0;
+require("./FormatPanel.scss");
+const React = __importStar(require("react"));
+const core_quantity_1 = require("@itwin/core-quantity");
+const FormatPrecision_1 = require("./FormatPrecision");
+const FormatSample_1 = require("./FormatSample");
+const FormatType_1 = require("./FormatType");
+const FormatUnitLabel_1 = require("./FormatUnitLabel");
+const FormatUnits_1 = require("./FormatUnits");
+const MiscFormatOptions_1 = require("./MiscFormatOptions");
+async function generateFormatSpec(formatProps, persistenceUnit, unitsProvider) {
+    const actualFormat = await core_quantity_1.Format.createFromJSON("custom", unitsProvider, formatProps);
+    return core_quantity_1.FormatterSpec.create(actualFormat.name, actualFormat, unitsProvider, persistenceUnit);
+}
+/** Component to show/edit Quantity Format.
+ * @alpha
+ */
+function FormatPanel(props) {
+    const [formatSpec, setFormatSpec] = React.useState();
+    const { initialFormat, showSample, initialMagnitude, unitsProvider, persistenceUnit, onFormatChange, provideFormatSpec, enableMinimumProperties } = props;
+    const [formatProps, setFormatProps] = React.useState(initialFormat);
+    const [showOptions, setShowOptions] = React.useState(false);
+    React.useEffect(() => {
+        setFormatProps(initialFormat);
+        setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook
+    }, [initialFormat]);
+    const handleUserFormatChanges = React.useCallback((newProps) => {
+        setFormatProps(newProps);
+        setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook
+        onFormatChange && onFormatChange(newProps);
+    }, [onFormatChange]);
+    const isMounted = React.useRef(false);
+    // runs returned function only when component is unmounted.
+    React.useEffect(() => {
+        isMounted.current = true;
+        return (() => {
+            isMounted.current = false;
+        });
+    }, []);
+    React.useEffect(() => {
+        async function fetchFormatSpec() {
+            const pu = await persistenceUnit;
+            let newFormatSpec;
+            if (provideFormatSpec) {
+                newFormatSpec = await provideFormatSpec(formatProps, pu, unitsProvider);
+            }
+            else {
+                newFormatSpec = await generateFormatSpec(formatProps, pu, unitsProvider);
+            }
+            isMounted.current && setFormatSpec(newFormatSpec);
+        }
+        if (!formatSpec)
+            fetchFormatSpec(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [formatProps, formatSpec, persistenceUnit, provideFormatSpec, unitsProvider]);
+    const handleFormatChange = React.useCallback((newFormatProps) => {
+        handleUserFormatChanges(newFormatProps);
+    }, [handleUserFormatChanges]);
+    const handleShowOptions = React.useCallback((show) => {
+        setShowOptions(show);
+    }, []);
+    return (React.createElement("div", { className: "components-quantityFormat-panel" },
+        showSample &&
+            React.createElement(FormatSample_1.FormatSample, { formatSpec: formatSpec, initialMagnitude: initialMagnitude }),
+        React.createElement(FormatUnits_1.FormatUnits, { unitsProvider: unitsProvider, persistenceUnit: formatSpec?.persistenceUnit, initialFormat: formatProps, onUnitsChange: handleFormatChange }),
+        React.createElement(FormatUnitLabel_1.FormatUnitLabel, { formatProps: formatProps, onUnitLabelChange: handleFormatChange }),
+        React.createElement(FormatType_1.FormatTypeOption, { formatProps: formatProps, onChange: handleFormatChange }),
+        React.createElement(FormatPrecision_1.FormatPrecision, { formatProps: formatProps, onChange: handleFormatChange }),
+        props.providePrimaryChildren && props.providePrimaryChildren(formatProps, handleFormatChange),
+        React.createElement(MiscFormatOptions_1.MiscFormatOptions, { formatProps: formatProps, onChange: handleFormatChange, enableMinimumProperties: enableMinimumProperties, showOptions: showOptions, onShowHideOptions: handleShowOptions }, props.provideSecondaryChildren && props.provideSecondaryChildren(formatProps, handleFormatChange))));
+}
+exports.FormatPanel = FormatPanel;
 //# sourceMappingURL=FormatPanel.js.map

package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,8BAA4B;AAC5B,6CAA+B;AAC/B,wDAAoG;AAEpG,uDAAoD;AACpD,iDAA8C;AAC9C,6CAAgD;AAChD,uDAAoD;AACpD,+CAA4C;AAC5C,2DAAwD;AAmBxD,KAAK,UAAU,kBAAkB,CAAC,WAAwB,EAAE,eAA0B,EAAE,aAA4B;IAClH,MAAM,YAAY,GAAG,MAAM,sBAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;IACvF,OAAO,6BAAa,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC;AAC/F,CAAC;AAED;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAiB,CAAC;IACpE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IAC1J,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,cAAc,CAAC,aAAa,CAAC,CAAC;QAC9B,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,qEAAqE;IACjG,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QAC1E,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,qEAAqE;QAC/F,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtC,2DAA2D;IAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,OAAO,CAAC,GAAG,EAAE;YACX,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,UAAU,eAAe;YAC5B,MAAM,EAAE,GAAG,MAAM,eAAe,CAAC;YACjC,IAAI,aAA4B,CAAC;YACjC,IAAI,iBAAiB,EAAE;gBACrB,aAAa,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;aACzE;iBAAM;gBACL,aAAa,GAAG,MAAM,kBAAkB,CAAC,WAAW,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;aAC1E;YACD,SAAS,CAAC,OAAO,IAAI,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,CAAC;QACD,IAAI,CAAC,UAAU;YACb,eAAe,EAAE,CAAC,CAAC,8DAA8D;IACrF,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjF,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,cAA2B,EAAE,EAAE;QAC3E,uBAAuB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE;QAC5D,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC7C,UAAU;YACT,oBAAC,2BAAY,IAAC,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,gBAAgB,GAAI;QAE9E,oBAAC,yBAAW,IAAC,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,kBAAkB,GAAI;QAC1J,oBAAC,iCAAe,IAAC,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,GAAI;QACpF,oBAAC,6BAAgB,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,GAAI;QAC5E,oBAAC,iCAAe,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,GAAI;QAC1E,KAAK,CAAC,sBAAsB,IAAI,KAAK,CAAC,sBAAsB,CAAC,WAAW,EAAE,kBAAkB,CAAC;QAC9F,oBAAC,qCAAiB,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,IACxL,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAChF,CAChB,CACP,CAAC;AACJ,CAAC;AAjED,kCAiEC","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 QuantityFormat\r\n */\r\n\r\nimport \"./FormatPanel.scss\";\r\nimport * as React from \"react\";\r\nimport { Format, FormatProps, FormatterSpec, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FormatPrecision } from \"./FormatPrecision\";\r\nimport { FormatSample } from \"./FormatSample\";\r\nimport { FormatTypeOption } from \"./FormatType\";\r\nimport { FormatUnitLabel } from \"./FormatUnitLabel\";\r\nimport { FormatUnits } from \"./FormatUnits\";\r\nimport { MiscFormatOptions } from \"./MiscFormatOptions\";\r\n\r\n/** Properties of [[FormatPanel]] component.\r\n * @alpha\r\n */\r\nexport interface FormatPanelProps extends CommonProps {\r\n  initialFormat: FormatProps;\r\n  unitsProvider: UnitsProvider;\r\n  persistenceUnit: Promise<UnitProps> | UnitProps;\r\n  showSample?: boolean;\r\n  initialMagnitude?: number;\r\n  // if true a only primary format properties are initially displayed and a \"More/Less\" link is added.\r\n  enableMinimumProperties?: boolean;\r\n  onFormatChange?: (format: FormatProps) => void;\r\n  provideFormatSpec?: (formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) => Promise<FormatterSpec>;\r\n  providePrimaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\r\n  provideSecondaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\r\n}\r\n\r\nasync function generateFormatSpec(formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) {\r\n  const actualFormat = await Format.createFromJSON(\"custom\", unitsProvider, formatProps);\r\n  return FormatterSpec.create(actualFormat.name, actualFormat, unitsProvider, persistenceUnit);\r\n}\r\n\r\n/** Component to show/edit Quantity Format.\r\n * @alpha\r\n */\r\nexport function FormatPanel(props: FormatPanelProps) {\r\n  const [formatSpec, setFormatSpec] = React.useState<FormatterSpec>();\r\n  const { initialFormat, showSample, initialMagnitude, unitsProvider, persistenceUnit, onFormatChange, provideFormatSpec, enableMinimumProperties } = props;\r\n  const [formatProps, setFormatProps] = React.useState(initialFormat);\r\n  const [showOptions, setShowOptions] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    setFormatProps(initialFormat);\r\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\r\n  }, [initialFormat]);\r\n\r\n  const handleUserFormatChanges = React.useCallback((newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\r\n    onFormatChange && onFormatChange(newProps);\r\n  }, [onFormatChange]);\r\n\r\n  const isMounted = React.useRef(false);\r\n\r\n  // runs returned function only when component is unmounted.\r\n  React.useEffect(() => {\r\n    isMounted.current = true;\r\n    return (() => {\r\n      isMounted.current = false;\r\n    });\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    async function fetchFormatSpec() {\r\n      const pu = await persistenceUnit;\r\n      let newFormatSpec: FormatterSpec;\r\n      if (provideFormatSpec) {\r\n        newFormatSpec = await provideFormatSpec(formatProps, pu, unitsProvider);\r\n      } else {\r\n        newFormatSpec = await generateFormatSpec(formatProps, pu, unitsProvider);\r\n      }\r\n      isMounted.current && setFormatSpec(newFormatSpec);\r\n    }\r\n    if (!formatSpec)\r\n      fetchFormatSpec(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }, [formatProps, formatSpec, persistenceUnit, provideFormatSpec, unitsProvider]);\r\n\r\n  const handleFormatChange = React.useCallback((newFormatProps: FormatProps) => {\r\n    handleUserFormatChanges(newFormatProps);\r\n  }, [handleUserFormatChanges]);\r\n\r\n  const handleShowOptions = React.useCallback((show: boolean) => {\r\n    setShowOptions(show);\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"components-quantityFormat-panel\">\r\n      {showSample &&\r\n        <FormatSample formatSpec={formatSpec} initialMagnitude={initialMagnitude} />\r\n      }\r\n      <FormatUnits unitsProvider={unitsProvider} persistenceUnit={formatSpec?.persistenceUnit} initialFormat={formatProps} onUnitsChange={handleFormatChange} />\r\n      <FormatUnitLabel formatProps={formatProps} onUnitLabelChange={handleFormatChange} />\r\n      <FormatTypeOption formatProps={formatProps} onChange={handleFormatChange} />\r\n      <FormatPrecision formatProps={formatProps} onChange={handleFormatChange} />\r\n      {props.providePrimaryChildren && props.providePrimaryChildren(formatProps, handleFormatChange)}\r\n      <MiscFormatOptions formatProps={formatProps} onChange={handleFormatChange} enableMinimumProperties={enableMinimumProperties} showOptions={showOptions} onShowHideOptions={handleShowOptions}>\r\n        {props.provideSecondaryChildren && props.provideSecondaryChildren(formatProps, handleFormatChange)}\r\n      </MiscFormatOptions>\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPanel.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 QuantityFormat\n */\n\nimport \"./FormatPanel.scss\";\nimport * as React from \"react\";\nimport { Format, FormatProps, FormatterSpec, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { FormatPrecision } from \"./FormatPrecision\";\nimport { FormatSample } from \"./FormatSample\";\nimport { FormatTypeOption } from \"./FormatType\";\nimport { FormatUnitLabel } from \"./FormatUnitLabel\";\nimport { FormatUnits } from \"./FormatUnits\";\nimport { MiscFormatOptions } from \"./MiscFormatOptions\";\n\n/** Properties of [[FormatPanel]] component.\n * @alpha\n */\nexport interface FormatPanelProps extends CommonProps {\n  initialFormat: FormatProps;\n  unitsProvider: UnitsProvider;\n  persistenceUnit: Promise<UnitProps> | UnitProps;\n  showSample?: boolean;\n  initialMagnitude?: number;\n  // if true a only primary format properties are initially displayed and a \"More/Less\" link is added.\n  enableMinimumProperties?: boolean;\n  onFormatChange?: (format: FormatProps) => void;\n  provideFormatSpec?: (formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) => Promise<FormatterSpec>;\n  providePrimaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\n  provideSecondaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\n}\n\nasync function generateFormatSpec(formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) {\n  const actualFormat = await Format.createFromJSON(\"custom\", unitsProvider, formatProps);\n  return FormatterSpec.create(actualFormat.name, actualFormat, unitsProvider, persistenceUnit);\n}\n\n/** Component to show/edit Quantity Format.\n * @alpha\n */\nexport function FormatPanel(props: FormatPanelProps) {\n  const [formatSpec, setFormatSpec] = React.useState<FormatterSpec>();\n  const { initialFormat, showSample, initialMagnitude, unitsProvider, persistenceUnit, onFormatChange, provideFormatSpec, enableMinimumProperties } = props;\n  const [formatProps, setFormatProps] = React.useState(initialFormat);\n  const [showOptions, setShowOptions] = React.useState(false);\n\n  React.useEffect(() => {\n    setFormatProps(initialFormat);\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\n  }, [initialFormat]);\n\n  const handleUserFormatChanges = React.useCallback((newProps: FormatProps) => {\n    setFormatProps(newProps);\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\n    onFormatChange && onFormatChange(newProps);\n  }, [onFormatChange]);\n\n  const isMounted = React.useRef(false);\n\n  // runs returned function only when component is unmounted.\n  React.useEffect(() => {\n    isMounted.current = true;\n    return (() => {\n      isMounted.current = false;\n    });\n  }, []);\n\n  React.useEffect(() => {\n    async function fetchFormatSpec() {\n      const pu = await persistenceUnit;\n      let newFormatSpec: FormatterSpec;\n      if (provideFormatSpec) {\n        newFormatSpec = await provideFormatSpec(formatProps, pu, unitsProvider);\n      } else {\n        newFormatSpec = await generateFormatSpec(formatProps, pu, unitsProvider);\n      }\n      isMounted.current && setFormatSpec(newFormatSpec);\n    }\n    if (!formatSpec)\n      fetchFormatSpec(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [formatProps, formatSpec, persistenceUnit, provideFormatSpec, unitsProvider]);\n\n  const handleFormatChange = React.useCallback((newFormatProps: FormatProps) => {\n    handleUserFormatChanges(newFormatProps);\n  }, [handleUserFormatChanges]);\n\n  const handleShowOptions = React.useCallback((show: boolean) => {\n    setShowOptions(show);\n  }, []);\n\n  return (\n    <div className=\"components-quantityFormat-panel\">\n      {showSample &&\n        <FormatSample formatSpec={formatSpec} initialMagnitude={initialMagnitude} />\n      }\n      <FormatUnits unitsProvider={unitsProvider} persistenceUnit={formatSpec?.persistenceUnit} initialFormat={formatProps} onUnitsChange={handleFormatChange} />\n      <FormatUnitLabel formatProps={formatProps} onUnitLabelChange={handleFormatChange} />\n      <FormatTypeOption formatProps={formatProps} onChange={handleFormatChange} />\n      <FormatPrecision formatProps={formatProps} onChange={handleFormatChange} />\n      {props.providePrimaryChildren && props.providePrimaryChildren(formatProps, handleFormatChange)}\n      <MiscFormatOptions formatProps={formatProps} onChange={handleFormatChange} enableMinimumProperties={enableMinimumProperties} showOptions={showOptions} onShowHideOptions={handleShowOptions}>\n        {props.provideSecondaryChildren && props.provideSecondaryChildren(formatProps, handleFormatChange)}\n      </MiscFormatOptions>\n    </div>\n  );\n}\n"]}

package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.scss

@@ -1,63 +1,59 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-
-.components-quantityFormat-panel {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  row-gap: 0;
-  column-gap: 6px;
-  align-items: center;
-
-  > .uicore-label {
-    font-size: var(--iui-font-size-1);
-    margin: 4.4px 0;
-
-    /* match margin on other select controls so it spaces properly in grid */
-    &.uicore-disabled {
-      color: var(--iui-color-text-disabled);
-    }
-  }
-
-  > span.components-inline {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-  }
-
-  > label.core-checkbox.core-checkbox-no-label {
-    min-height: 1.57em;
-  }
-
-  > button.components-quantityFormat-more-button {
-    grid-column: 1 / span 2;
-    border: none;
-    outline: none;
-    background: none;
-  }
-
-  .components-quantityFormat-more-button-label {
-    margin-right: 0.25em;
-  }
-
-  > a.components-quantityFormat-more-less {
-    font-size: var(--iui-font-size-1);
-    color: var(--iui-color-text-negative);
-    -webkit-transition: text-decoration 1s ease;
-    -moz-transition: text-decoration 1s ease;
-    -o-transition: text-decoration 1s ease;
-    transition: text-decoration 0.1s ease;
-
-    &:hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-
-  .iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+
+.components-quantityFormat-panel {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: 0;
+  column-gap: 6px;
+  align-items: center;
+
+  > .uicore-label {
+    font-size: var(--iui-font-size-1);
+    margin: 4.4px 0;
+
+    /* match margin on other select controls so it spaces properly in grid */
+    &.uicore-disabled {
+      color: var(--iui-color-text-disabled);
+    }
+  }
+
+  > span.components-inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+
+  > button.components-quantityFormat-more-button {
+    grid-column: 1 / span 2;
+    border: none;
+    outline: none;
+    background: none;
+  }
+
+  .components-quantityFormat-more-button-label {
+    margin-right: 0.25em;
+  }
+
+  > a.components-quantityFormat-more-less {
+    font-size: var(--iui-font-size-1);
+    color: var(--iui-color-text-negative);
+    -webkit-transition: text-decoration 1s ease;
+    -moz-transition: text-decoration 1s ease;
+    -o-transition: text-decoration 1s ease;
+    transition: text-decoration 0.1s ease;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+}

package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.d.ts

@@ -1,18 +1,18 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-/// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps } from "@itwin/core-quantity";
-/** Properties of [[FormatPrecision]] component.
- * @alpha
- */
-export interface FormatPrecisionProps extends CommonProps {
-    formatProps: FormatProps;
-    onChange?: (format: FormatProps) => void;
-}
-/** Component to show/edit Quantity Format Precision.
- * @alpha
- */
-export declare function FormatPrecision(props: FormatPrecisionProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[FormatPrecision]] component.
+ * @alpha
+ */
+export interface FormatPrecisionProps extends CommonProps {
+    formatProps: FormatProps;
+    onChange?: (format: FormatProps) => void;
+}
+/** Component to show/edit Quantity Format Precision.
+ * @alpha
+ */
+export declare function FormatPrecision(props: FormatPrecisionProps): JSX.Element;
 //# sourceMappingURL=FormatPrecision.d.ts.map

package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.js

@@ -1,54 +1,57 @@
-"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 QuantityFormat
- */
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatPrecision = void 0;
-const React = __importStar(require("react"));
-const core_quantity_1 = require("@itwin/core-quantity");
-const DecimalPrecision_1 = require("./misc/DecimalPrecision");
-const FractionPrecision_1 = require("./misc/FractionPrecision");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-/** Component to show/edit Quantity Format Precision.
- * @alpha
- */
-function FormatPrecision(props) {
-    var _a, _b;
-    const { formatProps, onChange } = props;
-    const handlePrecisionChange = React.useCallback((precision) => {
-        const newFormatProps = { ...formatProps, precision };
-        onChange && onChange(newFormatProps);
-    }, [formatProps, onChange]);
-    const formatType = (0, core_quantity_1.parseFormatType)(formatProps.type, "format");
-    const label = React.useRef(UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.labels.precision"));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label" }, label.current),
-        formatType === core_quantity_1.FormatType.Fractional ?
-            React.createElement(FractionPrecision_1.FractionPrecisionSelector, { "data-testid": "fraction-precision-selector", precision: (_a = formatProps.precision) !== null && _a !== void 0 ? _a : 0, onChange: handlePrecisionChange }) :
-            React.createElement(DecimalPrecision_1.DecimalPrecisionSelector, { "data-testid": "decimal-precision-selector", precision: (_b = formatProps.precision) !== null && _b !== void 0 ? _b : 0, onChange: handlePrecisionChange })));
-}
-exports.FormatPrecision = FormatPrecision;
+"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 QuantityFormat
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatPrecision = void 0;
+const React = __importStar(require("react"));
+const core_quantity_1 = require("@itwin/core-quantity");
+const DecimalPrecision_1 = require("./misc/DecimalPrecision");
+const FractionPrecision_1 = require("./misc/FractionPrecision");
+const UiIModelComponents_1 = require("../UiIModelComponents");
+/** Component to show/edit Quantity Format Precision.
+ * @alpha
+ */
+function FormatPrecision(props) {
+    const { formatProps, onChange } = props;
+    const handlePrecisionChange = React.useCallback((precision) => {
+        const newFormatProps = { ...formatProps, precision };
+        onChange && onChange(newFormatProps);
+    }, [formatProps, onChange]);
+    const formatType = (0, core_quantity_1.parseFormatType)(formatProps.type, "format");
+    const label = React.useRef(UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.labels.precision"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label" }, label.current),
+        formatType === core_quantity_1.FormatType.Fractional ?
+            React.createElement(FractionPrecision_1.FractionPrecisionSelector, { "data-testid": "fraction-precision-selector", precision: formatProps.precision ?? 0, onChange: handlePrecisionChange }) :
+            React.createElement(DecimalPrecision_1.DecimalPrecisionSelector, { "data-testid": "decimal-precision-selector", precision: formatProps.precision ?? 0, onChange: handlePrecisionChange })));
+}
+exports.FormatPrecision = FormatPrecision;
 //# sourceMappingURL=FormatPrecision.js.map

package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatPrecision.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPrecision.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAAgF;AAChF,8DAAmE;AACnE,gEAAqE;AACrE,8DAA2D;AAU3D;;GAEG;AACH,SAAgB,eAAe,CAAC,KAA2B;;IACzD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACpE,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;QACrD,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,IAAA,+BAAe,EAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,uCAAkB,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAC5F,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAC,OAAO,CAAQ;QACtD,UAAU,KAAK,0BAAU,CAAC,UAAU,CAAC,CAAC;YACrC,oBAAC,6CAAyB,mBAAa,6BAA6B,EAAC,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAAC,CAAC;YACjJ,oBAAC,2CAAwB,mBAAa,4BAA4B,EAAC,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAE9I,CACJ,CAAC;AACJ,CAAC;AApBD,0CAoBC","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 QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FormatProps, FormatType, parseFormatType } from \"@itwin/core-quantity\";\r\nimport { DecimalPrecisionSelector } from \"./misc/DecimalPrecision\";\r\nimport { FractionPrecisionSelector } from \"./misc/FractionPrecision\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties of [[FormatPrecision]] component.\r\n * @alpha\r\n */\r\nexport interface FormatPrecisionProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to show/edit Quantity Format Precision.\r\n * @alpha\r\n */\r\nexport function FormatPrecision(props: FormatPrecisionProps) {\r\n  const { formatProps, onChange } = props;\r\n\r\n  const handlePrecisionChange = React.useCallback((precision: number) => {\r\n    const newFormatProps = { ...formatProps, precision };\r\n    onChange && onChange(newFormatProps);\r\n  }, [formatProps, onChange]);\r\n\r\n  const formatType = parseFormatType(formatProps.type, \"format\");\r\n\r\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.precision\"));\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{label.current}</span>\r\n      {formatType === FormatType.Fractional ?\r\n        <FractionPrecisionSelector data-testid=\"fraction-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} /> :\r\n        <DecimalPrecisionSelector data-testid=\"decimal-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} />\r\n      }\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatPrecision.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPrecision.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAAgF;AAChF,8DAAmE;AACnE,gEAAqE;AACrE,8DAA2D;AAU3D;;GAEG;AACH,SAAgB,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACpE,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;QACrD,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,IAAA,+BAAe,EAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,uCAAkB,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAC5F,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAC,OAAO,CAAQ;QACtD,UAAU,KAAK,0BAAU,CAAC,UAAU,CAAC,CAAC;YACrC,oBAAC,6CAAyB,mBAAa,6BAA6B,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAAC,CAAC;YACjJ,oBAAC,2CAAwB,mBAAa,4BAA4B,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAE9I,CACJ,CAAC;AACJ,CAAC;AApBD,0CAoBC","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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { FormatProps, FormatType, parseFormatType } from \"@itwin/core-quantity\";\nimport { DecimalPrecisionSelector } from \"./misc/DecimalPrecision\";\nimport { FractionPrecisionSelector } from \"./misc/FractionPrecision\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Properties of [[FormatPrecision]] component.\n * @alpha\n */\nexport interface FormatPrecisionProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component to show/edit Quantity Format Precision.\n * @alpha\n */\nexport function FormatPrecision(props: FormatPrecisionProps) {\n  const { formatProps, onChange } = props;\n\n  const handlePrecisionChange = React.useCallback((precision: number) => {\n    const newFormatProps = { ...formatProps, precision };\n    onChange && onChange(newFormatProps);\n  }, [formatProps, onChange]);\n\n  const formatType = parseFormatType(formatProps.type, \"format\");\n\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.precision\"));\n  return (\n    <>\n      <span className={\"uicore-label\"}>{label.current}</span>\n      {formatType === FormatType.Fractional ?\n        <FractionPrecisionSelector data-testid=\"fraction-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} /> :\n        <DecimalPrecisionSelector data-testid=\"decimal-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} />\n      }\n    </>\n  );\n}\n"]}