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

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.js

@@ -1,25 +1,25 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { UiIModelComponents } from "../../UiIModelComponents";
-import { Select } from "@itwin/itwinui-react";
-/** Component use to set Station size (number of digits from right until '+').
- * @internal
- */
-export function StationSizeSelector(props) {
-    const { value, disabled, onChange, ...otherProps } = props;
-    const separatorOptions = React.useRef([
-        { value: 2, label: UiIModelComponents.translate("QuantityFormat.station_size.two") },
-        { value: 3, label: UiIModelComponents.translate("QuantityFormat.station_size.three") },
-    ]);
-    const handleOnChange = React.useCallback((newValue) => {
-        onChange && onChange(newValue);
-    }, [onChange]);
-    return (React.createElement(Select, { options: separatorOptions.current, disabled: disabled, value: value, onChange: handleOnChange, size: "small", ...otherProps }));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { UiIModelComponents } from "../../UiIModelComponents";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to set Station size (number of digits from right until '+').
+ * @internal
+ */
+export function StationSizeSelector(props) {
+    const { value, disabled, onChange, ...otherProps } = props;
+    const separatorOptions = React.useRef([
+        { value: 2, label: UiIModelComponents.translate("QuantityFormat.station_size.two") },
+        { value: 3, label: UiIModelComponents.translate("QuantityFormat.station_size.three") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    return (React.createElement(Select, { options: separatorOptions.current, disabled: disabled, value: value, onChange: handleOnChange, size: "small", ...otherProps }));
+}
 //# sourceMappingURL=StationSizeSelector.js.map

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

@@ -1,18 +1,18 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-/// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ThousandsSelector]] component.
- * @internal
- */
-export interface ThousandsSelectorProps extends CommonProps {
-    separator: string;
-    disabled: boolean;
-    onChange: (value: string) => void;
-}
-/** Component use to set Quantity Format thousand group separator.
- * @internal
- */
-export declare function ThousandsSelector(props: ThousandsSelectorProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ThousandsSelector]] component.
+ * @internal
+ */
+export interface ThousandsSelectorProps extends CommonProps {
+    separator: string;
+    disabled: boolean;
+    onChange: (value: string) => void;
+}
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export declare function ThousandsSelector(props: ThousandsSelectorProps): JSX.Element;
 //# sourceMappingURL=ThousandsSelector.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js

@@ -1,34 +1,34 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { UiIModelComponents } from "../../UiIModelComponents";
-import { Select } from "@itwin/itwinui-react";
-/** Component use to set Quantity Format thousand group separator.
- * @internal
- */
-export function ThousandsSelector(props) {
-    const { separator, disabled, onChange, ...otherProps } = props;
-    const uomDefaultEntries = React.useRef([
-        { value: ",", label: UiIModelComponents.translate("QuantityFormat.thousand_separator.comma") },
-        { value: ".", label: UiIModelComponents.translate("QuantityFormat.thousand_separator.point") },
-    ]);
-    const handleOnChange = React.useCallback((newValue) => {
-        onChange && onChange(newValue);
-    }, [onChange]);
-    const separatorOptions = React.useMemo(() => {
-        const completeListOfEntries = [];
-        // istanbul ignore next (only used if format already has a character that does not match standard options)
-        if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {
-            completeListOfEntries.push({ value: separator, label: separator });
-        }
-        completeListOfEntries.push(...uomDefaultEntries.current);
-        return completeListOfEntries;
-    }, [separator]);
-    return (React.createElement(Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { UiIModelComponents } from "../../UiIModelComponents";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export function ThousandsSelector(props) {
+    const { separator, disabled, onChange, ...otherProps } = props;
+    const uomDefaultEntries = React.useRef([
+        { value: ",", label: UiIModelComponents.translate("QuantityFormat.thousand_separator.comma") },
+        { value: ".", label: UiIModelComponents.translate("QuantityFormat.thousand_separator.point") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    const separatorOptions = React.useMemo(() => {
+        const completeListOfEntries = [];
+        // istanbul ignore next (only used if format already has a character that does not match standard options)
+        if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {
+            completeListOfEntries.push({ value: separator, label: separator });
+        }
+        completeListOfEntries.push(...uomDefaultEntries.current);
+        return completeListOfEntries;
+    }, [separator]);
+    return (React.createElement(Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
+}
 //# sourceMappingURL=ThousandsSelector.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.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 [[ThousandsSeparator]] component.
- * @internal
- */
-export interface ThousandsSeparatorProps extends CommonProps {
-    formatProps: FormatProps;
-    onChange?: (format: FormatProps) => void;
-}
-/** Component use to set Quantity Format thousand group separator.
- * @internal
- */
-export declare function ThousandsSeparator(props: ThousandsSeparatorProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[ThousandsSeparator]] component.
+ * @internal
+ */
+export interface ThousandsSeparatorProps extends CommonProps {
+    formatProps: FormatProps;
+    onChange?: (format: FormatProps) => void;
+}
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export declare function ThousandsSeparator(props: ThousandsSeparatorProps): JSX.Element;
 //# sourceMappingURL=ThousandsSeparator.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js

@@ -1,70 +1,70 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { Format, FormatTraits, getTraitString } from "@itwin/core-quantity";
-import { Checkbox } from "@itwin/itwinui-react";
-import { ThousandsSelector } from "./ThousandsSelector";
-import { UiIModelComponents } from "../../UiIModelComponents";
-/** Component use to set Quantity Format thousand group separator.
- * @internal
- */
-export function ThousandsSeparator(props) {
-    var _a;
-    const { formatProps, onChange } = props;
-    const handleSetFormatProps = React.useCallback((newProps) => {
-        onChange && onChange(newProps);
-    }, [onChange]);
-    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(/,|;|\|/);
-                formatTraits = [...traits, traitStr];
-            }
-        }
-        else { // clearing trait
-            // istanbul ignore else
-            if (formatProps.formatTraits) {
-                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 handleUseThousandsSeparatorChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);
-    }, [setFormatTrait]);
-    const isFormatTraitSet = React.useCallback((trait) => {
-        return Format.isFormatTraitSetInProps(formatProps, trait);
-    }, [formatProps]);
-    const handleThousandSeparatorChange = React.useCallback((thousandSeparator) => {
-        let decimalSeparator = formatProps.decimalSeparator;
-        // make sure 1000 and decimal separator do not match
-        // istanbul ignore else
-        if (isFormatTraitSet(FormatTraits.Use1000Separator)) {
-            if (thousandSeparator === ".")
-                decimalSeparator = ",";
-            else // thousandSeparator === ","
-                decimalSeparator = ".";
-        }
-        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
-    const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.useThousandSeparatorLabel"));
-    const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.thousandSeparatorLabel"));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
-        React.createElement(Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
-        React.createElement("span", { className: classnames("uicore-label", !(isFormatTraitSet(FormatTraits.Use1000Separator)) && "uicore-disabled") }, thousandSeparatorLabel.current),
-        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: (_a = formatProps.thousandSeparator) !== null && _a !== void 0 ? _a : ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { Format, FormatTraits, getTraitString } from "@itwin/core-quantity";
+import { Checkbox } from "@itwin/itwinui-react";
+import { ThousandsSelector } from "./ThousandsSelector";
+import { UiIModelComponents } from "../../UiIModelComponents";
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export function ThousandsSeparator(props) {
+    var _a;
+    const { formatProps, onChange } = props;
+    const handleSetFormatProps = React.useCallback((newProps) => {
+        onChange && onChange(newProps);
+    }, [onChange]);
+    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(/,|;|\|/);
+                formatTraits = [...traits, traitStr];
+            }
+        }
+        else { // clearing trait
+            // istanbul ignore else
+            if (formatProps.formatTraits) {
+                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 handleUseThousandsSeparatorChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);
+    }, [setFormatTrait]);
+    const isFormatTraitSet = React.useCallback((trait) => {
+        return Format.isFormatTraitSetInProps(formatProps, trait);
+    }, [formatProps]);
+    const handleThousandSeparatorChange = React.useCallback((thousandSeparator) => {
+        let decimalSeparator = formatProps.decimalSeparator;
+        // make sure 1000 and decimal separator do not match
+        // istanbul ignore else
+        if (isFormatTraitSet(FormatTraits.Use1000Separator)) {
+            if (thousandSeparator === ".")
+                decimalSeparator = ",";
+            else // thousandSeparator === ","
+                decimalSeparator = ".";
+        }
+        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
+    const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.useThousandSeparatorLabel"));
+    const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.thousandSeparatorLabel"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
+        React.createElement(Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
+        React.createElement("span", { className: classnames("uicore-label", !(isFormatTraitSet(FormatTraits.Use1000Separator)) && "uicore-disabled") }, thousandSeparatorLabel.current),
+        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: (_a = formatProps.thousandSeparator) !== null && _a !== void 0 ? _a : ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
+}
 //# sourceMappingURL=ThousandsSeparator.js.map

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

@@ -1,24 +1,24 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-/// <reference types="react" />
-import { UnitsProvider } from "@itwin/core-quantity";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[UnitDescr]] component.
- * @internal
- */
-export interface UnitDescrProps extends CommonProps {
-    name: string;
-    parentUnitName?: string;
-    label: string;
-    index: number;
-    unitsProvider: UnitsProvider;
-    readonly?: boolean;
-    onUnitChange: (value: string, index: number) => void;
-    onLabelChange: (value: string, index: number) => void;
-}
-/** Component use to display dropdown list of possible units.
- * @internal
- */
-export declare function UnitDescr(props: UnitDescrProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { UnitsProvider } from "@itwin/core-quantity";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[UnitDescr]] component.
+ * @internal
+ */
+export interface UnitDescrProps extends CommonProps {
+    name: string;
+    parentUnitName?: string;
+    label: string;
+    index: number;
+    unitsProvider: UnitsProvider;
+    readonly?: boolean;
+    onUnitChange: (value: string, index: number) => void;
+    onLabelChange: (value: string, index: number) => void;
+}
+/** Component use to display dropdown list of possible units.
+ * @internal
+ */
+export declare function UnitDescr(props: UnitDescrProps): JSX.Element;
 //# sourceMappingURL=UnitDescr.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js

@@ -1,97 +1,97 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { Input, Select } from "@itwin/itwinui-react";
-async function getUnitConversionData(possibleUnits, toUnit, unitsProvider) {
-    const unitConversionEntries = possibleUnits.map(async (unit) => {
-        const conversion = await unitsProvider.getConversion(unit, toUnit);
-        return { conversion, unitProps: unit };
-    });
-    return unitConversionEntries;
-}
-async function getPossibleUnits(parentUnit, unitsProvider, ensureCompatibleComposite) {
-    const phenomenon = parentUnit.phenomenon;
-    const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);
-    if (!ensureCompatibleComposite)
-        return possibleUnits;
-    const conversionPromises = await getUnitConversionData(possibleUnits, parentUnit, unitsProvider);
-    const conversionEntries = await Promise.all(conversionPromises);
-    // sort the entries so the best potential sub unit will be the first one in the array
-    return conversionEntries.filter((entry) => ((entry.unitProps.system === parentUnit.system) && (entry.conversion.factor < 1)))
-        .sort((a, b) => b.conversion.factor - a.conversion.factor)
-        .map((value) => value.unitProps);
-}
-function getUnitName(fullUnitName) {
-    const nameParts = fullUnitName.split(/[.:]/);
-    // istanbul ignore else
-    if (nameParts.length > 0)
-        return nameParts[nameParts.length - 1];
-    // istanbul ignore next
-    throw Error("Bad unit name encountered");
-}
-/** Component use to display dropdown list of possible units.
- * @internal
- */
-export function UnitDescr(props) {
-    const { name, label, parentUnitName, index, onUnitChange, onLabelChange, readonly, unitsProvider } = props;
-    const [unitOptions, setUnitOptions] = React.useState([{ value: name, label: getUnitName(name) }]);
-    const [currentUnit, setCurrentUnit] = React.useState({ name, label });
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    });
-    React.useEffect(() => {
-        async function fetchAllowableUnitSelections() {
-            const currentUnitProps = await unitsProvider.findUnitByName(name);
-            const parentUnit = await unitsProvider.findUnitByName(parentUnitName ? parentUnitName : name);
-            // istanbul ignore else
-            if (parentUnit && currentUnitProps) {
-                let potentialSubUnit;
-                const potentialUnits = await getPossibleUnits(parentUnit, unitsProvider, index !== 0);
-                // istanbul ignore else
-                if (index < 3) {
-                    const potentialSubUnits = await getPossibleUnits(currentUnitProps, unitsProvider, true);
-                    if (potentialSubUnits.length)
-                        potentialSubUnit = potentialSubUnits[0];
-                }
-                const options = (potentialUnits.length > 0) ?
-                    potentialUnits.map((unitValue) => {
-                        return { value: `${unitValue.name}:${unitValue.label}`, label: getUnitName(unitValue.name) };
-                    }).sort((a, b) => a.label.localeCompare(b.label))
-                    : /* istanbul ignore next */
-                        [{ value: `${currentUnitProps.name}:${currentUnitProps.label}`, label: getUnitName(name) }];
-                if (potentialSubUnit) {
-                    // construct an entry that will provide the name and label of the unit to add
-                    options.push({ value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`, label: "Add sub-unit" }); // NEEDSWORK - i18n
-                }
-                if (index !== 0)
-                    options.push({ value: "REMOVEUNIT", label: "Remove" }); // NEEDSWORK - i18n
-                // istanbul ignore else
-                if (isMounted.current) {
-                    setUnitOptions(options);
-                    setCurrentUnit(currentUnitProps);
-                }
-            }
-        }
-        fetchAllowableUnitSelections(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }, [index, label, name, parentUnitName, unitsProvider]);
-    const handleOnUnitChange = React.useCallback((newValue) => {
-        onUnitChange && onUnitChange(newValue, index);
-    }, [index, onUnitChange]);
-    const handleOnLabelChange = React.useCallback((e) => {
-        e.preventDefault();
-        onLabelChange && onLabelChange(e.target.value, index);
-    }, [index, onLabelChange]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { options: unitOptions, "data-testid": `unit-${currentUnit.name}`, value: `${currentUnit.name}:${currentUnit.label}`, onChange: handleOnUnitChange, disabled: readonly, size: "small" }),
-        React.createElement(Input, { "data-testid": `unit-label-${currentUnit.name}`, value: label, onChange: handleOnLabelChange, size: "small" })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { Input, Select } from "@itwin/itwinui-react";
+async function getUnitConversionData(possibleUnits, toUnit, unitsProvider) {
+    const unitConversionEntries = possibleUnits.map(async (unit) => {
+        const conversion = await unitsProvider.getConversion(unit, toUnit);
+        return { conversion, unitProps: unit };
+    });
+    return unitConversionEntries;
+}
+async function getPossibleUnits(parentUnit, unitsProvider, ensureCompatibleComposite) {
+    const phenomenon = parentUnit.phenomenon;
+    const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);
+    if (!ensureCompatibleComposite)
+        return possibleUnits;
+    const conversionPromises = await getUnitConversionData(possibleUnits, parentUnit, unitsProvider);
+    const conversionEntries = await Promise.all(conversionPromises);
+    // sort the entries so the best potential sub unit will be the first one in the array
+    return conversionEntries.filter((entry) => ((entry.unitProps.system === parentUnit.system) && (entry.conversion.factor < 1)))
+        .sort((a, b) => b.conversion.factor - a.conversion.factor)
+        .map((value) => value.unitProps);
+}
+function getUnitName(fullUnitName) {
+    const nameParts = fullUnitName.split(/[.:]/);
+    // istanbul ignore else
+    if (nameParts.length > 0)
+        return nameParts[nameParts.length - 1];
+    // istanbul ignore next
+    throw Error("Bad unit name encountered");
+}
+/** Component use to display dropdown list of possible units.
+ * @internal
+ */
+export function UnitDescr(props) {
+    const { name, label, parentUnitName, index, onUnitChange, onLabelChange, readonly, unitsProvider } = props;
+    const [unitOptions, setUnitOptions] = React.useState([{ value: name, label: getUnitName(name) }]);
+    const [currentUnit, setCurrentUnit] = React.useState({ name, label });
+    const isMounted = React.useRef(false);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+    React.useEffect(() => {
+        async function fetchAllowableUnitSelections() {
+            const currentUnitProps = await unitsProvider.findUnitByName(name);
+            const parentUnit = await unitsProvider.findUnitByName(parentUnitName ? parentUnitName : name);
+            // istanbul ignore else
+            if (parentUnit && currentUnitProps) {
+                let potentialSubUnit;
+                const potentialUnits = await getPossibleUnits(parentUnit, unitsProvider, index !== 0);
+                // istanbul ignore else
+                if (index < 3) {
+                    const potentialSubUnits = await getPossibleUnits(currentUnitProps, unitsProvider, true);
+                    if (potentialSubUnits.length)
+                        potentialSubUnit = potentialSubUnits[0];
+                }
+                const options = (potentialUnits.length > 0) ?
+                    potentialUnits.map((unitValue) => {
+                        return { value: `${unitValue.name}:${unitValue.label}`, label: getUnitName(unitValue.name) };
+                    }).sort((a, b) => a.label.localeCompare(b.label))
+                    : /* istanbul ignore next */
+                        [{ value: `${currentUnitProps.name}:${currentUnitProps.label}`, label: getUnitName(name) }];
+                if (potentialSubUnit) {
+                    // construct an entry that will provide the name and label of the unit to add
+                    options.push({ value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`, label: "Add sub-unit" }); // NEEDSWORK - i18n
+                }
+                if (index !== 0)
+                    options.push({ value: "REMOVEUNIT", label: "Remove" }); // NEEDSWORK - i18n
+                // istanbul ignore else
+                if (isMounted.current) {
+                    setUnitOptions(options);
+                    setCurrentUnit(currentUnitProps);
+                }
+            }
+        }
+        fetchAllowableUnitSelections(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [index, label, name, parentUnitName, unitsProvider]);
+    const handleOnUnitChange = React.useCallback((newValue) => {
+        onUnitChange && onUnitChange(newValue, index);
+    }, [index, onUnitChange]);
+    const handleOnLabelChange = React.useCallback((e) => {
+        e.preventDefault();
+        onLabelChange && onLabelChange(e.target.value, index);
+    }, [index, onLabelChange]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Select, { options: unitOptions, "data-testid": `unit-${currentUnit.name}`, value: `${currentUnit.name}:${currentUnit.label}`, onChange: handleOnUnitChange, disabled: readonly, size: "small" }),
+        React.createElement(Input, { "data-testid": `unit-label-${currentUnit.name}`, value: label, onChange: handleOnLabelChange, size: "small" })));
+}
 //# sourceMappingURL=UnitDescr.js.map