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

package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js

@@ -1,159 +1,159 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import classnames from "classnames";
-import * as React from "react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { Checkbox } from "@itwin/itwinui-react";
-import { Format, FormatTraits, FormatType, getTraitString, parseFormatType, parseScientificType, parseShowSignOption, ScientificType, scientificTypeToString, showSignOptionToString, } from "@itwin/core-quantity";
-import { SignOptionSelector } from "./misc/SignOption";
-import { ThousandsSeparator } from "./misc/ThousandsSeparator";
-import { DecimalSeparatorSelector } from "./misc/DecimalSeparator";
-import { ScientificTypeSelector } from "./misc/ScientificType";
-import { StationSeparatorSelector } from "./misc/StationSeparatorSelector";
-import { StationSizeSelector } from "./misc/StationSizeSelector";
-import { UiIModelComponents } from "../UiIModelComponents";
-/** Component use to set miscellaneous properties is a Formatted Quantity.
- * @alpha
- */
-export function MiscFormatOptions(props) {
-    var _a, _b;
-    const { formatProps, onChange, showOptions, onShowHideOptions, enableMinimumProperties } = props;
-    const handleSetFormatProps = React.useCallback((newFormatProps) => {
-        onChange && onChange(newFormatProps);
-    }, [onChange]);
-    const isFormatTraitSet = React.useCallback((trait) => {
-        return Format.isFormatTraitSetInProps(formatProps, trait);
-    }, [formatProps]);
-    const handleShowSignChange = React.useCallback((option) => {
-        const newShowSignOption = showSignOptionToString(option);
-        const newFormatProps = { ...formatProps, showSignOption: newShowSignOption };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, handleSetFormatProps]);
-    const setFormatTrait = React.useCallback((trait, setActive) => {
-        const traitStr = getTraitString(trait);
-        let formatTraits = [traitStr];
-        if (setActive) { // setting trait
-            // istanbul ignore else
-            if (formatProps.formatTraits) {
-                const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\|/);
-                // istanbul ignore else
-                if (!traits.find((traitEntry) => traitStr === traitEntry)) {
-                    formatTraits = [...traits, traitStr];
-                }
-            }
-        }
-        else { // clearing trait
-            // istanbul ignore next
-            if (!formatProps.formatTraits)
-                return;
-            const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\|/);
-            formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);
-        }
-        const newFormatProps = { ...formatProps, formatTraits };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, handleSetFormatProps]);
-    const handleShowTrailingZeroesChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.TrailZeroes, e.target.checked);
-    }, [setFormatTrait]);
-    const handleKeepDecimalPointChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.KeepDecimalPoint, e.target.checked);
-    }, [setFormatTrait]);
-    const handleKeepSingleZeroChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.KeepSingleZero, e.target.checked);
-    }, [setFormatTrait]);
-    const handleZeroEmptyChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.ZeroEmpty, e.target.checked);
-    }, [setFormatTrait]);
-    const handleUseFractionDashChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.FractionDash, e.target.checked);
-    }, [setFormatTrait]);
-    const handleDecimalSeparatorChange = React.useCallback((decimalSeparator) => {
-        let thousandSeparator = formatProps.thousandSeparator;
-        // make sure 1000 and decimal separator do not match
-        // istanbul ignore else
-        if (isFormatTraitSet(FormatTraits.Use1000Separator)) {
-            switch (decimalSeparator) {
-                case ".":
-                    thousandSeparator = ",";
-                    break;
-                case ",":
-                    thousandSeparator = ".";
-                    break;
-            }
-        }
-        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
-    const handleScientificTypeChange = React.useCallback((type) => {
-        const newFormatProps = { ...formatProps, scientificType: scientificTypeToString(type) };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, handleSetFormatProps]);
-    const handleFormatChange = React.useCallback((newFormatProps) => {
-        handleSetFormatProps(newFormatProps);
-    }, [handleSetFormatProps]);
-    const formatType = React.useMemo(() => parseFormatType(formatProps.type, "format"), [formatProps.type]);
-    const showSignOption = React.useMemo(() => { var _a; return parseShowSignOption((_a = formatProps.showSignOption) !== null && _a !== void 0 ? _a : "onlyNegative", "format"); }, [formatProps.showSignOption]);
-    const handleToggleButtonClick = React.useCallback(() => {
-        onShowHideOptions(!showOptions);
-    }, [onShowHideOptions, showOptions]);
-    const handleKeyUpOnLink = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.key === SpecialKey.Enter || e.key === SpecialKey.Space) {
-            onShowHideOptions(!showOptions);
-            e.preventDefault();
-        }
-    }, [onShowHideOptions, showOptions]);
-    const handleStationSeparatorChange = React.useCallback((value) => {
-        const newFormatProps = { ...formatProps, stationSeparator: value };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, handleSetFormatProps]);
-    const handleStationOffsetChange = React.useCallback((value) => {
-        const newFormatProps = { ...formatProps, stationOffsetSize: value };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, handleSetFormatProps]);
-    const signOptionLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.signOptionLabel"));
-    const stationOffsetLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.stationOffsetLabel"));
-    const stationSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.stationSeparatorLabel"));
-    const decimalSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.decimalSeparatorLabel"));
-    const showTrailZerosLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.showTrailZerosLabel"));
-    const keepSingleZeroLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.keepSingleZeroLabel"));
-    const zeroEmptyLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.zeroEmptyLabel"));
-    const moreLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.moreLabel"));
-    const lessLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.lessLabel"));
-    const keepDecimalPointLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.keepDecimalPointLabel"));
-    const fractionDashLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.fractionDashLabel"));
-    const scientificTypeLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.scientificTypeLabel"));
-    return (React.createElement(React.Fragment, null,
-        enableMinimumProperties && !showOptions && React.createElement("a", { onClick: handleToggleButtonClick, onKeyUp: handleKeyUpOnLink, className: "components-quantityFormat-more-less", role: "link", "data-testid": "quantityFormat-more", tabIndex: 0 }, moreLabel.current),
-        (!enableMinimumProperties || showOptions) &&
-            React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "uicore-label" }, signOptionLabel.current),
-                React.createElement(SignOptionSelector, { "data-testid": "sign-option-selector", signOption: showSignOption, onChange: handleShowSignChange }),
-                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Station && "uicore-disabled") }, stationOffsetLabel.current),
-                React.createElement(StationSizeSelector, { "data-testid": "station-size-selector", value: ((_a = formatProps.stationOffsetSize) !== null && _a !== void 0 ? _a : 2), disabled: formatType !== FormatType.Station, onChange: handleStationOffsetChange }),
-                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Station && "uicore-disabled") }, stationSeparatorLabel.current),
-                React.createElement(StationSeparatorSelector, { "data-testid": "station-separator-selector", separator: (undefined !== formatProps.stationSeparator ? formatProps.stationSeparator : "+"), disabled: formatType !== FormatType.Station, onChange: handleStationSeparatorChange }),
-                React.createElement(ThousandsSeparator, { formatProps: formatProps, onChange: handleFormatChange }),
-                React.createElement("span", { className: classnames("uicore-label", formatType === FormatType.Fractional && "uicore-disabled") }, decimalSeparatorLabel.current),
-                React.createElement(DecimalSeparatorSelector, { "data-testid": "decimal-separator-selector", separator: (_b = formatProps.decimalSeparator) !== null && _b !== void 0 ? _b : ".", onChange: handleDecimalSeparatorChange, disabled: formatType === FormatType.Fractional }),
-                React.createElement("span", { className: "uicore-label" }, showTrailZerosLabel.current),
-                React.createElement(Checkbox, { "data-testid": "show-trail-zeros", checked: isFormatTraitSet(FormatTraits.TrailZeroes), onChange: handleShowTrailingZeroesChange }),
-                React.createElement("span", { className: classnames("uicore-label", formatType === FormatType.Fractional && "uicore-disabled") }, keepDecimalPointLabel.current),
-                React.createElement(Checkbox, { "data-testid": "keep-decimal-point", checked: isFormatTraitSet(FormatTraits.KeepDecimalPoint), onChange: handleKeepDecimalPointChange }),
-                React.createElement("span", { className: "uicore-label" }, keepSingleZeroLabel.current),
-                React.createElement(Checkbox, { "data-testid": "keep-single-zero", checked: isFormatTraitSet(FormatTraits.KeepSingleZero), onChange: handleKeepSingleZeroChange }),
-                React.createElement("span", { className: "uicore-label" }, zeroEmptyLabel.current),
-                React.createElement(Checkbox, { "data-testid": "zero-empty", checked: isFormatTraitSet(FormatTraits.ZeroEmpty), onChange: handleZeroEmptyChange }),
-                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Fractional && "uicore-disabled") }, fractionDashLabel.current),
-                React.createElement(Checkbox, { "data-testid": "fraction-dash", checked: isFormatTraitSet(FormatTraits.FractionDash), onChange: handleUseFractionDashChange, disabled: formatType !== FormatType.Fractional }),
-                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Scientific && "uicore-disabled") }, scientificTypeLabel.current),
-                React.createElement(ScientificTypeSelector, { "data-testid": "scientific-type-selector", type: (formatProps.scientificType && formatProps.scientificType.length > 0) ? parseScientificType(formatProps.scientificType, "custom") : ScientificType.Normalized, disabled: formatType !== FormatType.Scientific, onChange: handleScientificTypeChange }),
-                props.children,
-                enableMinimumProperties && showOptions && React.createElement("a", { onClick: handleToggleButtonClick, onKeyUp: handleKeyUpOnLink, className: "components-quantityFormat-more-less", role: "link", "data-testid": "quantityFormat-less", tabIndex: 0 }, lessLabel.current))));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { Checkbox } from "@itwin/itwinui-react";
+import { Format, FormatTraits, FormatType, getTraitString, parseFormatType, parseScientificType, parseShowSignOption, ScientificType, scientificTypeToString, showSignOptionToString, } from "@itwin/core-quantity";
+import { SignOptionSelector } from "./misc/SignOption";
+import { ThousandsSeparator } from "./misc/ThousandsSeparator";
+import { DecimalSeparatorSelector } from "./misc/DecimalSeparator";
+import { ScientificTypeSelector } from "./misc/ScientificType";
+import { StationSeparatorSelector } from "./misc/StationSeparatorSelector";
+import { StationSizeSelector } from "./misc/StationSizeSelector";
+import { UiIModelComponents } from "../UiIModelComponents";
+/** Component use to set miscellaneous properties is a Formatted Quantity.
+ * @alpha
+ */
+export function MiscFormatOptions(props) {
+    var _a, _b;
+    const { formatProps, onChange, showOptions, onShowHideOptions, enableMinimumProperties } = props;
+    const handleSetFormatProps = React.useCallback((newFormatProps) => {
+        onChange && onChange(newFormatProps);
+    }, [onChange]);
+    const isFormatTraitSet = React.useCallback((trait) => {
+        return Format.isFormatTraitSetInProps(formatProps, trait);
+    }, [formatProps]);
+    const handleShowSignChange = React.useCallback((option) => {
+        const newShowSignOption = showSignOptionToString(option);
+        const newFormatProps = { ...formatProps, showSignOption: newShowSignOption };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const setFormatTrait = React.useCallback((trait, setActive) => {
+        const traitStr = getTraitString(trait);
+        let formatTraits = [traitStr];
+        if (setActive) { // setting trait
+            // istanbul ignore else
+            if (formatProps.formatTraits) {
+                const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\|/);
+                // istanbul ignore else
+                if (!traits.find((traitEntry) => traitStr === traitEntry)) {
+                    formatTraits = [...traits, traitStr];
+                }
+            }
+        }
+        else { // clearing trait
+            // istanbul ignore next
+            if (!formatProps.formatTraits)
+                return;
+            const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\|/);
+            formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);
+        }
+        const newFormatProps = { ...formatProps, formatTraits };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const handleShowTrailingZeroesChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.TrailZeroes, e.target.checked);
+    }, [setFormatTrait]);
+    const handleKeepDecimalPointChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.KeepDecimalPoint, e.target.checked);
+    }, [setFormatTrait]);
+    const handleKeepSingleZeroChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.KeepSingleZero, e.target.checked);
+    }, [setFormatTrait]);
+    const handleZeroEmptyChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.ZeroEmpty, e.target.checked);
+    }, [setFormatTrait]);
+    const handleUseFractionDashChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.FractionDash, e.target.checked);
+    }, [setFormatTrait]);
+    const handleDecimalSeparatorChange = React.useCallback((decimalSeparator) => {
+        let thousandSeparator = formatProps.thousandSeparator;
+        // make sure 1000 and decimal separator do not match
+        // istanbul ignore else
+        if (isFormatTraitSet(FormatTraits.Use1000Separator)) {
+            switch (decimalSeparator) {
+                case ".":
+                    thousandSeparator = ",";
+                    break;
+                case ",":
+                    thousandSeparator = ".";
+                    break;
+            }
+        }
+        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
+    const handleScientificTypeChange = React.useCallback((type) => {
+        const newFormatProps = { ...formatProps, scientificType: scientificTypeToString(type) };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const handleFormatChange = React.useCallback((newFormatProps) => {
+        handleSetFormatProps(newFormatProps);
+    }, [handleSetFormatProps]);
+    const formatType = React.useMemo(() => parseFormatType(formatProps.type, "format"), [formatProps.type]);
+    const showSignOption = React.useMemo(() => { var _a; return parseShowSignOption((_a = formatProps.showSignOption) !== null && _a !== void 0 ? _a : "onlyNegative", "format"); }, [formatProps.showSignOption]);
+    const handleToggleButtonClick = React.useCallback(() => {
+        onShowHideOptions(!showOptions);
+    }, [onShowHideOptions, showOptions]);
+    const handleKeyUpOnLink = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.key === SpecialKey.Enter || e.key === SpecialKey.Space) {
+            onShowHideOptions(!showOptions);
+            e.preventDefault();
+        }
+    }, [onShowHideOptions, showOptions]);
+    const handleStationSeparatorChange = React.useCallback((value) => {
+        const newFormatProps = { ...formatProps, stationSeparator: value };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const handleStationOffsetChange = React.useCallback((value) => {
+        const newFormatProps = { ...formatProps, stationOffsetSize: value };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const signOptionLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.signOptionLabel"));
+    const stationOffsetLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.stationOffsetLabel"));
+    const stationSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.stationSeparatorLabel"));
+    const decimalSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.decimalSeparatorLabel"));
+    const showTrailZerosLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.showTrailZerosLabel"));
+    const keepSingleZeroLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.keepSingleZeroLabel"));
+    const zeroEmptyLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.zeroEmptyLabel"));
+    const moreLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.moreLabel"));
+    const lessLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.lessLabel"));
+    const keepDecimalPointLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.keepDecimalPointLabel"));
+    const fractionDashLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.fractionDashLabel"));
+    const scientificTypeLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.scientificTypeLabel"));
+    return (React.createElement(React.Fragment, null,
+        enableMinimumProperties && !showOptions && React.createElement("a", { onClick: handleToggleButtonClick, onKeyUp: handleKeyUpOnLink, className: "components-quantityFormat-more-less", role: "link", "data-testid": "quantityFormat-more", tabIndex: 0 }, moreLabel.current),
+        (!enableMinimumProperties || showOptions) &&
+            React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "uicore-label" }, signOptionLabel.current),
+                React.createElement(SignOptionSelector, { "data-testid": "sign-option-selector", signOption: showSignOption, onChange: handleShowSignChange }),
+                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Station && "uicore-disabled") }, stationOffsetLabel.current),
+                React.createElement(StationSizeSelector, { "data-testid": "station-size-selector", value: ((_a = formatProps.stationOffsetSize) !== null && _a !== void 0 ? _a : 2), disabled: formatType !== FormatType.Station, onChange: handleStationOffsetChange }),
+                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Station && "uicore-disabled") }, stationSeparatorLabel.current),
+                React.createElement(StationSeparatorSelector, { "data-testid": "station-separator-selector", separator: (undefined !== formatProps.stationSeparator ? formatProps.stationSeparator : "+"), disabled: formatType !== FormatType.Station, onChange: handleStationSeparatorChange }),
+                React.createElement(ThousandsSeparator, { formatProps: formatProps, onChange: handleFormatChange }),
+                React.createElement("span", { className: classnames("uicore-label", formatType === FormatType.Fractional && "uicore-disabled") }, decimalSeparatorLabel.current),
+                React.createElement(DecimalSeparatorSelector, { "data-testid": "decimal-separator-selector", separator: (_b = formatProps.decimalSeparator) !== null && _b !== void 0 ? _b : ".", onChange: handleDecimalSeparatorChange, disabled: formatType === FormatType.Fractional }),
+                React.createElement("span", { className: "uicore-label" }, showTrailZerosLabel.current),
+                React.createElement(Checkbox, { "data-testid": "show-trail-zeros", checked: isFormatTraitSet(FormatTraits.TrailZeroes), onChange: handleShowTrailingZeroesChange }),
+                React.createElement("span", { className: classnames("uicore-label", formatType === FormatType.Fractional && "uicore-disabled") }, keepDecimalPointLabel.current),
+                React.createElement(Checkbox, { "data-testid": "keep-decimal-point", checked: isFormatTraitSet(FormatTraits.KeepDecimalPoint), onChange: handleKeepDecimalPointChange }),
+                React.createElement("span", { className: "uicore-label" }, keepSingleZeroLabel.current),
+                React.createElement(Checkbox, { "data-testid": "keep-single-zero", checked: isFormatTraitSet(FormatTraits.KeepSingleZero), onChange: handleKeepSingleZeroChange }),
+                React.createElement("span", { className: "uicore-label" }, zeroEmptyLabel.current),
+                React.createElement(Checkbox, { "data-testid": "zero-empty", checked: isFormatTraitSet(FormatTraits.ZeroEmpty), onChange: handleZeroEmptyChange }),
+                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Fractional && "uicore-disabled") }, fractionDashLabel.current),
+                React.createElement(Checkbox, { "data-testid": "fraction-dash", checked: isFormatTraitSet(FormatTraits.FractionDash), onChange: handleUseFractionDashChange, disabled: formatType !== FormatType.Fractional }),
+                React.createElement("span", { className: classnames("uicore-label", formatType !== FormatType.Scientific && "uicore-disabled") }, scientificTypeLabel.current),
+                React.createElement(ScientificTypeSelector, { "data-testid": "scientific-type-selector", type: (formatProps.scientificType && formatProps.scientificType.length > 0) ? parseScientificType(formatProps.scientificType, "custom") : ScientificType.Normalized, disabled: formatType !== FormatType.Scientific, onChange: handleScientificTypeChange }),
+                props.children,
+                enableMinimumProperties && showOptions && React.createElement("a", { onClick: handleToggleButtonClick, onKeyUp: handleKeyUpOnLink, className: "components-quantityFormat-more-less", role: "link", "data-testid": "quantityFormat-less", tabIndex: 0 }, lessLabel.current))));
+}
 //# sourceMappingURL=MiscFormatOptions.js.map

package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.d.ts

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-/// <reference types="react" />
-import { QuantityTypeArg } from "@itwin/core-frontend";
-import { FormatProps } from "@itwin/core-quantity";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[QuantityFormatPanel]] component.
- * @alpha
- */
-export interface QuantityFormatPanelProps extends CommonProps {
-    quantityType: QuantityTypeArg;
-    onFormatChange?: (format: FormatProps) => void;
-    /** props below are to be passed on to FormatPanel */
-    showSample?: boolean;
-    initialMagnitude?: number;
-    enableMinimumProperties?: boolean;
-}
-/** Component to set properties that control Quantity Formatting.
- * @alpha
- */
-export declare function QuantityFormatPanel(props: QuantityFormatPanelProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { QuantityTypeArg } from "@itwin/core-frontend";
+import { FormatProps } from "@itwin/core-quantity";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[QuantityFormatPanel]] component.
+ * @alpha
+ */
+export interface QuantityFormatPanelProps extends CommonProps {
+    quantityType: QuantityTypeArg;
+    onFormatChange?: (format: FormatProps) => void;
+    /** props below are to be passed on to FormatPanel */
+    showSample?: boolean;
+    initialMagnitude?: number;
+    enableMinimumProperties?: boolean;
+}
+/** Component to set properties that control Quantity Formatting.
+ * @alpha
+ */
+export declare function QuantityFormatPanel(props: QuantityFormatPanelProps): JSX.Element;
 //# sourceMappingURL=QuantityFormatPanel.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js

@@ -1,123 +1,123 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition, isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, } from "@itwin/core-frontend";
-import { Checkbox, Input, Select } from "@itwin/itwinui-react";
-import { FormatPanel } from "./FormatPanel";
-import { DeepCompare } from "@itwin/core-geometry";
-function createTextInputFormatPropEditor(key, label, inProps, getString, setString, fireFormatChange) {
-    const value = getString(inProps);
-    return (React.createElement(React.Fragment, { key: `${key}` },
-        React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
-        React.createElement(Input, { "data-testid": `${key}-editor`, key: `${key}-editor`, value: value, size: "small", onChange: (e) => {
-                const newProps = setString(inProps, e.currentTarget.value);
-                fireFormatChange(newProps);
-            } })));
-}
-function createSelectFormatPropEditor(key, label, options, inProps, getString, setString, fireFormatChange) {
-    const value = getString(inProps);
-    return (React.createElement(React.Fragment, { key: `${key}` },
-        React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
-        React.createElement(Select, { "data-testid": `${key}-editor`, key: `${key}-editor`, value: value, options: options, size: "small", onChange: (newValue) => {
-                const newProps = setString(inProps, newValue);
-                fireFormatChange(newProps);
-            } })));
-}
-function createCheckboxFormatPropEditor(key, label, inProps, getBool, setBool, fireFormatChange) {
-    const isChecked = getBool(inProps);
-    return (React.createElement(React.Fragment, { key: `${key}` },
-        React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
-        React.createElement(Checkbox, { "data-testid": `${key}-editor`, key: `${key}-editor`, checked: isChecked, onChange: (e) => {
-                const newProps = setBool(inProps, e.target.checked);
-                fireFormatChange(newProps);
-            } })));
-}
-function formatAreEqual(obj1, obj2) {
-    const compare = new DeepCompare();
-    return compare.compare(obj1, obj2);
-}
-/** Component to set properties that control Quantity Formatting.
- * @alpha
- */
-export function QuantityFormatPanel(props) {
-    const { quantityType, onFormatChange, ...otherProps } = props;
-    const [formatProps, setFormatProps] = React.useState();
-    const initialFormatProps = React.useRef();
-    const [persistenceUnit, setPersistenceUnit] = React.useState();
-    React.useEffect(() => {
-        const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);
-        // istanbul ignore else
-        if (!initialFormatProps.current)
-            initialFormatProps.current = newFormatProps;
-        setFormatProps(newFormatProps);
-        const quantityTypeKey = getQuantityTypeKey(quantityType);
-        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
-        // istanbul ignore else
-        if (quantityTypeDefinition)
-            setPersistenceUnit(quantityTypeDefinition.persistenceUnit);
-        else
-            throw Error(`Unable to locate a quantity type with type ${quantityType}`);
-    }, [quantityType]); // no dependencies defined as we want this to run on every render
-    // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => {
-        const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);
-        // istanbul ignore else
-        if (initialFormatProps.current && newFormatProps) {
-            if (!formatAreEqual(newFormatProps, initialFormatProps.current)) {
-                initialFormatProps.current = newFormatProps;
-                setFormatProps(newFormatProps);
-            }
-        }
-    }); // no dependencies defined as we want this to run on every render
-    const handleOnFormatChanged = React.useCallback(async (newProps) => {
-        setFormatProps(newProps);
-        onFormatChange && onFormatChange(newProps);
-    }, [onFormatChange]);
-    const createCustomPropEditors = React.useCallback((specs, inProps, fireFormatChange) => {
-        return specs.map((spec, index) => {
-            if (isCheckboxFormatPropEditorSpec(spec))
-                return createCheckboxFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getBool, spec.setBool, fireFormatChange);
-            if (isTextSelectFormatPropEditorSpec(spec))
-                return createSelectFormatPropEditor(`${spec.editorType}-${index}`, spec.label, spec.selectOptions, inProps, spec.getString, spec.setString, fireFormatChange);
-            /* istanbul ignore else */
-            if (isTextInputFormatPropEditorSpec(spec))
-                return createTextInputFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getString, spec.setString, fireFormatChange);
-            /* istanbul ignore next */
-            return React.createElement("div", { key: index });
-        });
-    }, []);
-    const providePrimaryChildren = React.useCallback((inProps, fireFormatChange) => {
-        const quantityTypeKey = getQuantityTypeKey(quantityType);
-        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
-        if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&
-            quantityTypeDefinition.isCompatibleFormatProps(inProps)) {
-            // istanbul ignore else
-            if (quantityTypeDefinition.primaryPropEditorSpecs)
-                return createCustomPropEditors(quantityTypeDefinition.primaryPropEditorSpecs, inProps, fireFormatChange);
-        }
-        return null;
-    }, [createCustomPropEditors, quantityType]);
-    const provideSecondaryChildren = React.useCallback((inProps, fireFormatChange) => {
-        const quantityTypeKey = getQuantityTypeKey(quantityType);
-        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
-        if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&
-            quantityTypeDefinition.isCompatibleFormatProps(inProps)) {
-            // istanbul ignore else
-            if (quantityTypeDefinition.secondaryPropEditorSpecs)
-                return createCustomPropEditors(quantityTypeDefinition.secondaryPropEditorSpecs, inProps, fireFormatChange);
-        }
-        return null;
-    }, [createCustomPropEditors, quantityType]);
-    const provideFormatSpec = React.useCallback(async (inProps, _persistenceUnit, _unitsProvider) => {
-        return IModelApp.quantityFormatter.generateFormatterSpecByType(quantityType, inProps);
-    }, [quantityType]);
-    return (React.createElement("div", { className: "components-quantityFormat-quantityPanel" }, persistenceUnit && formatProps &&
-        React.createElement(FormatPanel, { onFormatChange: handleOnFormatChanged, ...otherProps, initialFormat: formatProps, unitsProvider: IModelApp.quantityFormatter.unitsProvider, persistenceUnit: persistenceUnit, providePrimaryChildren: providePrimaryChildren, provideSecondaryChildren: provideSecondaryChildren, provideFormatSpec: provideFormatSpec })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition, isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, } from "@itwin/core-frontend";
+import { Checkbox, Input, Select } from "@itwin/itwinui-react";
+import { FormatPanel } from "./FormatPanel";
+import { DeepCompare } from "@itwin/core-geometry";
+function createTextInputFormatPropEditor(key, label, inProps, getString, setString, fireFormatChange) {
+    const value = getString(inProps);
+    return (React.createElement(React.Fragment, { key: `${key}` },
+        React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
+        React.createElement(Input, { "data-testid": `${key}-editor`, key: `${key}-editor`, value: value, size: "small", onChange: (e) => {
+                const newProps = setString(inProps, e.currentTarget.value);
+                fireFormatChange(newProps);
+            } })));
+}
+function createSelectFormatPropEditor(key, label, options, inProps, getString, setString, fireFormatChange) {
+    const value = getString(inProps);
+    return (React.createElement(React.Fragment, { key: `${key}` },
+        React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
+        React.createElement(Select, { "data-testid": `${key}-editor`, key: `${key}-editor`, value: value, options: options, size: "small", onChange: (newValue) => {
+                const newProps = setString(inProps, newValue);
+                fireFormatChange(newProps);
+            } })));
+}
+function createCheckboxFormatPropEditor(key, label, inProps, getBool, setBool, fireFormatChange) {
+    const isChecked = getBool(inProps);
+    return (React.createElement(React.Fragment, { key: `${key}` },
+        React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
+        React.createElement(Checkbox, { "data-testid": `${key}-editor`, key: `${key}-editor`, checked: isChecked, onChange: (e) => {
+                const newProps = setBool(inProps, e.target.checked);
+                fireFormatChange(newProps);
+            } })));
+}
+function formatAreEqual(obj1, obj2) {
+    const compare = new DeepCompare();
+    return compare.compare(obj1, obj2);
+}
+/** Component to set properties that control Quantity Formatting.
+ * @alpha
+ */
+export function QuantityFormatPanel(props) {
+    const { quantityType, onFormatChange, ...otherProps } = props;
+    const [formatProps, setFormatProps] = React.useState();
+    const initialFormatProps = React.useRef();
+    const [persistenceUnit, setPersistenceUnit] = React.useState();
+    React.useEffect(() => {
+        const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);
+        // istanbul ignore else
+        if (!initialFormatProps.current)
+            initialFormatProps.current = newFormatProps;
+        setFormatProps(newFormatProps);
+        const quantityTypeKey = getQuantityTypeKey(quantityType);
+        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
+        // istanbul ignore else
+        if (quantityTypeDefinition)
+            setPersistenceUnit(quantityTypeDefinition.persistenceUnit);
+        else
+            throw Error(`Unable to locate a quantity type with type ${quantityType}`);
+    }, [quantityType]); // no dependencies defined as we want this to run on every render
+    // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(() => {
+        const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);
+        // istanbul ignore else
+        if (initialFormatProps.current && newFormatProps) {
+            if (!formatAreEqual(newFormatProps, initialFormatProps.current)) {
+                initialFormatProps.current = newFormatProps;
+                setFormatProps(newFormatProps);
+            }
+        }
+    }); // no dependencies defined as we want this to run on every render
+    const handleOnFormatChanged = React.useCallback(async (newProps) => {
+        setFormatProps(newProps);
+        onFormatChange && onFormatChange(newProps);
+    }, [onFormatChange]);
+    const createCustomPropEditors = React.useCallback((specs, inProps, fireFormatChange) => {
+        return specs.map((spec, index) => {
+            if (isCheckboxFormatPropEditorSpec(spec))
+                return createCheckboxFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getBool, spec.setBool, fireFormatChange);
+            if (isTextSelectFormatPropEditorSpec(spec))
+                return createSelectFormatPropEditor(`${spec.editorType}-${index}`, spec.label, spec.selectOptions, inProps, spec.getString, spec.setString, fireFormatChange);
+            /* istanbul ignore else */
+            if (isTextInputFormatPropEditorSpec(spec))
+                return createTextInputFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getString, spec.setString, fireFormatChange);
+            /* istanbul ignore next */
+            return React.createElement("div", { key: index });
+        });
+    }, []);
+    const providePrimaryChildren = React.useCallback((inProps, fireFormatChange) => {
+        const quantityTypeKey = getQuantityTypeKey(quantityType);
+        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
+        if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&
+            quantityTypeDefinition.isCompatibleFormatProps(inProps)) {
+            // istanbul ignore else
+            if (quantityTypeDefinition.primaryPropEditorSpecs)
+                return createCustomPropEditors(quantityTypeDefinition.primaryPropEditorSpecs, inProps, fireFormatChange);
+        }
+        return null;
+    }, [createCustomPropEditors, quantityType]);
+    const provideSecondaryChildren = React.useCallback((inProps, fireFormatChange) => {
+        const quantityTypeKey = getQuantityTypeKey(quantityType);
+        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
+        if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&
+            quantityTypeDefinition.isCompatibleFormatProps(inProps)) {
+            // istanbul ignore else
+            if (quantityTypeDefinition.secondaryPropEditorSpecs)
+                return createCustomPropEditors(quantityTypeDefinition.secondaryPropEditorSpecs, inProps, fireFormatChange);
+        }
+        return null;
+    }, [createCustomPropEditors, quantityType]);
+    const provideFormatSpec = React.useCallback(async (inProps, _persistenceUnit, _unitsProvider) => {
+        return IModelApp.quantityFormatter.generateFormatterSpecByType(quantityType, inProps);
+    }, [quantityType]);
+    return (React.createElement("div", { className: "components-quantityFormat-quantityPanel" }, persistenceUnit && formatProps &&
+        React.createElement(FormatPanel, { onFormatChange: handleOnFormatChanged, ...otherProps, initialFormat: formatProps, unitsProvider: IModelApp.quantityFormatter.unitsProvider, persistenceUnit: persistenceUnit, providePrimaryChildren: providePrimaryChildren, provideSecondaryChildren: provideSecondaryChildren, provideFormatSpec: provideFormatSpec })));
+}
 //# sourceMappingURL=QuantityFormatPanel.js.map