@itwin/imodel-components-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,84 +1,83 @@
-/*---------------------------------------------------------------------------------------------
-* 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, Select } from "@itwin/itwinui-react";
-import { UiIModelComponents } from "../UiIModelComponents";
-function UomSeparatorSelector(props) {
-    const { separator, onChange, ...otherProps } = props;
-    const uomDefaultEntries = React.useRef([
-        { value: "", label: UiIModelComponents.translate("QuantityFormat.none") },
-        { value: " ", label: UiIModelComponents.translate("QuantityFormat.space") },
-        { value: "-", label: UiIModelComponents.translate("QuantityFormat.dash") },
-    ]);
-    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, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
-}
-/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.
- * @alpha
- */
-export function FormatUnitLabel(props) {
-    var _a;
-    const { formatProps, onUnitLabelChange } = props;
-    const handleSetFormatProps = React.useCallback((newProps) => {
-        onUnitLabelChange && onUnitLabelChange(newProps);
-    }, [onUnitLabelChange]);
-    const isFormatTraitSet = React.useCallback((trait) => {
-        return Format.isFormatTraitSetInProps(formatProps, trait);
-    }, [formatProps]);
-    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 handleUomSeparatorChange = React.useCallback((newSeparator) => {
-        const newFormatProps = { ...formatProps, uomSeparator: newSeparator };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, handleSetFormatProps]);
-    const handleShowUnitLabelChange = React.useCallback((e) => {
-        setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked);
-    }, [setFormatTrait]);
-    const appendUnitLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.appendUnitLabel"));
-    const labelSeparator = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.labelSeparator"));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label" }, appendUnitLabel.current),
-        React.createElement(Checkbox, { "data-testid": "show-unit-label-checkbox", checked: isFormatTraitSet(FormatTraits.ShowUnitLabel), onChange: handleShowUnitLabelChange }),
-        React.createElement("span", { className: classnames("uicore-label", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && "uicore-disabled") }, labelSeparator.current),
-        React.createElement(UomSeparatorSelector, { "data-testid": "uom-separator-select", separator: (_a = formatProps.uomSeparator) !== null && _a !== void 0 ? _a : "", onChange: handleUomSeparatorChange, disabled: !isFormatTraitSet(FormatTraits.ShowUnitLabel) })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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, Select } from "@itwin/itwinui-react";
+import { UiIModelComponents } from "../UiIModelComponents";
+function UomSeparatorSelector(props) {
+    const { separator, onChange, ...otherProps } = props;
+    const uomDefaultEntries = React.useRef([
+        { value: "", label: UiIModelComponents.translate("QuantityFormat.none") },
+        { value: " ", label: UiIModelComponents.translate("QuantityFormat.space") },
+        { value: "-", label: UiIModelComponents.translate("QuantityFormat.dash") },
+    ]);
+    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, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
+}
+/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.
+ * @alpha
+ */
+export function FormatUnitLabel(props) {
+    const { formatProps, onUnitLabelChange } = props;
+    const handleSetFormatProps = React.useCallback((newProps) => {
+        onUnitLabelChange && onUnitLabelChange(newProps);
+    }, [onUnitLabelChange]);
+    const isFormatTraitSet = React.useCallback((trait) => {
+        return Format.isFormatTraitSetInProps(formatProps, trait);
+    }, [formatProps]);
+    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 handleUomSeparatorChange = React.useCallback((newSeparator) => {
+        const newFormatProps = { ...formatProps, uomSeparator: newSeparator };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const handleShowUnitLabelChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked);
+    }, [setFormatTrait]);
+    const appendUnitLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.appendUnitLabel"));
+    const labelSeparator = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.labelSeparator"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label" }, appendUnitLabel.current),
+        React.createElement(Checkbox, { "data-testid": "show-unit-label-checkbox", checked: isFormatTraitSet(FormatTraits.ShowUnitLabel), onChange: handleShowUnitLabelChange }),
+        React.createElement("span", { className: classnames("uicore-label", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && "uicore-disabled") }, labelSeparator.current),
+        React.createElement(UomSeparatorSelector, { "data-testid": "uom-separator-select", separator: formatProps.uomSeparator ?? "", onChange: handleUomSeparatorChange, disabled: !isFormatTraitSet(FormatTraits.ShowUnitLabel) })));
+}
 //# sourceMappingURL=FormatUnitLabel.js.map

package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatUnitLabel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnitLabel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Format, FormatProps, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\r\nimport { Checkbox, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\ninterface UomSeparatorSelectorProps extends CommonProps {\r\n  separator: string;\r\n  disabled?: boolean;\r\n  onChange: (value: string) => void;\r\n}\r\n\r\nfunction UomSeparatorSelector(props: UomSeparatorSelectorProps) {\r\n  const { separator, onChange, ...otherProps } = props;\r\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\r\n    { value: \"\", label: UiIModelComponents.translate(\"QuantityFormat.none\") },\r\n    { value: \" \", label: UiIModelComponents.translate(\"QuantityFormat.space\") },\r\n    { value: \"-\", label: UiIModelComponents.translate(\"QuantityFormat.dash\") },\r\n  ]);\r\n\r\n  const handleOnChange = React.useCallback((newValue: string) => {\r\n    onChange && onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  const separatorOptions = React.useMemo(() => {\r\n    const completeListOfEntries: SelectOption<string>[] = [];\r\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\r\n    if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {\r\n      completeListOfEntries.push({ value: separator, label: separator });\r\n    }\r\n    completeListOfEntries.push(...uomDefaultEntries.current);\r\n    return completeListOfEntries;\r\n  }, [separator]);\r\n\r\n  return (\r\n    <Select options={separatorOptions} value={separator} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n\r\n/** Properties of [[FormatUnitLabel]] component.\r\n * @alpha\r\n */\r\nexport interface FormatUnitLabelProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onUnitLabelChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.\r\n * @alpha\r\n */\r\nexport function FormatUnitLabel(props: FormatUnitLabelProps) {\r\n  const { formatProps, onUnitLabelChange } = props;\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    onUnitLabelChange && onUnitLabelChange(newProps);\r\n  }, [onUnitLabelChange]);\r\n\r\n  const isFormatTraitSet = React.useCallback((trait: FormatTraits) => {\r\n    return Format.isFormatTraitSetInProps(formatProps, trait);\r\n  }, [formatProps]);\r\n\r\n  const setFormatTrait = React.useCallback((trait: FormatTraits, setActive: boolean) => {\r\n    const traitStr = getTraitString(trait);\r\n    let formatTraits: string[] = [traitStr];\r\n    if (setActive) {// setting trait\r\n      // istanbul ignore else\r\n      if (formatProps.formatTraits) {\r\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n        // istanbul ignore else\r\n        if (!traits.find((traitEntry) => traitStr === traitEntry)) {\r\n          formatTraits = [...traits, traitStr];\r\n        }\r\n      }\r\n    } else {// clearing trait\r\n      // istanbul ignore next\r\n      if (!formatProps.formatTraits)\r\n        return;\r\n      const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n      formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\r\n    }\r\n    const newFormatProps = { ...formatProps, formatTraits };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUomSeparatorChange = React.useCallback((newSeparator: string) => {\r\n    const newFormatProps = { ...formatProps, uomSeparator: newSeparator };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleShowUnitLabelChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked);\r\n  }, [setFormatTrait]);\r\n\r\n  const appendUnitLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.appendUnitLabel\"));\r\n  const labelSeparator = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.labelSeparator\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{appendUnitLabel.current}</span>\r\n      <Checkbox data-testid=\"show-unit-label-checkbox\" checked={isFormatTraitSet(FormatTraits.ShowUnitLabel)} onChange={handleShowUnitLabelChange} />\r\n      <span className={classnames(\"uicore-label\", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && \"uicore-disabled\")}>{labelSeparator.current}</span>\r\n      <UomSeparatorSelector data-testid=\"uom-separator-select\" separator={formatProps.uomSeparator ?? \"\"} onChange={handleUomSeparatorChange} disabled={!isFormatTraitSet(FormatTraits.ShowUnitLabel)} />\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatUnitLabel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnitLabel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAe,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQ3D,SAAS,oBAAoB,CAAC,KAAgC;IAC5D,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC7D,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE;QACzE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,sBAAsB,CAAC,EAAE;QAC3E,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE;KAC3E,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QAC5D,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IAAI,SAAS,KAAK,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE;YACxF,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACzD,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,CAC/G,CAAC;AACJ,CAAC;AAUD;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACvE,iBAAiB,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmB,EAAE,EAAE;QACjE,OAAO,MAAM,CAAC,uBAAuB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmB,EAAE,SAAkB,EAAE,EAAE;QACnF,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,YAAY,GAAa,CAAC,QAAQ,CAAC,CAAC;QACxC,IAAI,SAAS,EAAE,EAAC,gBAAgB;YAC9B,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxJ,uBAAuB;gBACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,QAAQ,KAAK,UAAU,CAAC,EAAE;oBACzD,YAAY,GAAG,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC;iBACtC;aACF;SACF;aAAM,EAAC,iBAAiB;YACvB,uBAAuB;YACvB,IAAI,CAAC,WAAW,CAAC,YAAY;gBAC3B,OAAO;YACT,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACxJ,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;SACvE;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,YAAY,EAAE,CAAC;QACxD,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QAC1E,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;QACtE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QAC7F,cAAc,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,uCAAuC,CAAC,CAAC,CAAC;IAC5G,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,sCAAsC,CAAC,CAAC,CAAC;IAE1G,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,eAAe,CAAC,OAAO,CAAQ;QACjE,oBAAC,QAAQ,mBAAa,0BAA0B,EAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,yBAAyB,GAAI;QAC/I,8BAAM,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAAG,cAAc,CAAC,OAAO,CAAQ;QAChJ,oBAAC,oBAAoB,mBAAa,sBAAsB,EAAC,SAAS,EAAE,WAAW,CAAC,YAAY,IAAI,EAAE,EAAE,QAAQ,EAAE,wBAAwB,EAAE,QAAQ,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,aAAa,CAAC,GAAI,CAClM,CACJ,CAAC;AACJ,CAAC","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 classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Format, FormatProps, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\r\nimport { Checkbox, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\ninterface UomSeparatorSelectorProps extends CommonProps {\r\n  separator: string;\r\n  disabled?: boolean;\r\n  onChange: (value: string) => void;\r\n}\r\n\r\nfunction UomSeparatorSelector(props: UomSeparatorSelectorProps) {\r\n  const { separator, onChange, ...otherProps } = props;\r\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\r\n    { value: \"\", label: UiIModelComponents.translate(\"QuantityFormat.none\") },\r\n    { value: \" \", label: UiIModelComponents.translate(\"QuantityFormat.space\") },\r\n    { value: \"-\", label: UiIModelComponents.translate(\"QuantityFormat.dash\") },\r\n  ]);\r\n\r\n  const handleOnChange = React.useCallback((newValue: string) => {\r\n    onChange && onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  const separatorOptions = React.useMemo(() => {\r\n    const completeListOfEntries: SelectOption<string>[] = [];\r\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\r\n    if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {\r\n      completeListOfEntries.push({ value: separator, label: separator });\r\n    }\r\n    completeListOfEntries.push(...uomDefaultEntries.current);\r\n    return completeListOfEntries;\r\n  }, [separator]);\r\n\r\n  return (\r\n    <Select options={separatorOptions} value={separator} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n\r\n/** Properties of [[FormatUnitLabel]] component.\r\n * @alpha\r\n */\r\nexport interface FormatUnitLabelProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onUnitLabelChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.\r\n * @alpha\r\n */\r\nexport function FormatUnitLabel(props: FormatUnitLabelProps) {\r\n  const { formatProps, onUnitLabelChange } = props;\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    onUnitLabelChange && onUnitLabelChange(newProps);\r\n  }, [onUnitLabelChange]);\r\n\r\n  const isFormatTraitSet = React.useCallback((trait: FormatTraits) => {\r\n    return Format.isFormatTraitSetInProps(formatProps, trait);\r\n  }, [formatProps]);\r\n\r\n  const setFormatTrait = React.useCallback((trait: FormatTraits, setActive: boolean) => {\r\n    const traitStr = getTraitString(trait);\r\n    let formatTraits: string[] = [traitStr];\r\n    if (setActive) {// setting trait\r\n      // istanbul ignore else\r\n      if (formatProps.formatTraits) {\r\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n        // istanbul ignore else\r\n        if (!traits.find((traitEntry) => traitStr === traitEntry)) {\r\n          formatTraits = [...traits, traitStr];\r\n        }\r\n      }\r\n    } else {// clearing trait\r\n      // istanbul ignore next\r\n      if (!formatProps.formatTraits)\r\n        return;\r\n      const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n      formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\r\n    }\r\n    const newFormatProps = { ...formatProps, formatTraits };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUomSeparatorChange = React.useCallback((newSeparator: string) => {\r\n    const newFormatProps = { ...formatProps, uomSeparator: newSeparator };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleShowUnitLabelChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked);\r\n  }, [setFormatTrait]);\r\n\r\n  const appendUnitLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.appendUnitLabel\"));\r\n  const labelSeparator = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.labelSeparator\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{appendUnitLabel.current}</span>\r\n      <Checkbox data-testid=\"show-unit-label-checkbox\" checked={isFormatTraitSet(FormatTraits.ShowUnitLabel)} onChange={handleShowUnitLabelChange} />\r\n      <span className={classnames(\"uicore-label\", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && \"uicore-disabled\")}>{labelSeparator.current}</span>\r\n      <UomSeparatorSelector data-testid=\"uom-separator-select\" separator={formatProps.uomSeparator ?? \"\"} onChange={handleUomSeparatorChange} disabled={!isFormatTraitSet(FormatTraits.ShowUnitLabel)} />\r\n    </>\r\n  );\r\n}\r\n"]}

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

@@ -1,20 +1,20 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-/// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps, UnitProps, UnitsProvider } from "@itwin/core-quantity";
-/** Properties of [[FormatUnits]] component.
- * @alpha
- */
-export interface FormatUnitsProps extends CommonProps {
-    initialFormat: FormatProps;
-    persistenceUnit?: UnitProps;
-    unitsProvider: UnitsProvider;
-    onUnitsChange?: (format: FormatProps) => void;
-}
-/** Component to show/edit Units used for Quantity Formatting.
- * @alpha
- */
-export declare function FormatUnits(props: FormatUnitsProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps, UnitProps, UnitsProvider } from "@itwin/core-quantity";
+/** Properties of [[FormatUnits]] component.
+ * @alpha
+ */
+export interface FormatUnitsProps extends CommonProps {
+    initialFormat: FormatProps;
+    persistenceUnit?: UnitProps;
+    unitsProvider: UnitsProvider;
+    onUnitsChange?: (format: FormatProps) => void;
+}
+/** Component to show/edit Units used for Quantity Formatting.
+ * @alpha
+ */
+export declare function FormatUnits(props: FormatUnitsProps): JSX.Element;
 //# sourceMappingURL=FormatUnits.d.ts.map

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

@@ -1,111 +1,107 @@
-/*---------------------------------------------------------------------------------------------
-* 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 } from "@itwin/itwinui-react";
-import { UnitDescr } from "./misc/UnitDescr";
-import { UiIModelComponents } from "../UiIModelComponents";
-/** Component to show/edit Units used for Quantity Formatting.
- * @alpha
- */
-export function FormatUnits(props) {
-    var _a, _b, _c;
-    const { initialFormat, persistenceUnit, unitsProvider, onUnitsChange } = props;
-    const initialFormatRef = React.useRef(initialFormat);
-    const [formatProps, setFormatProps] = React.useState(initialFormat);
-    React.useEffect(() => {
-        if (initialFormatRef.current !== initialFormat) {
-            initialFormatRef.current = initialFormat;
-            setFormatProps(initialFormat);
-        }
-    }, [initialFormat]);
-    const handleSetFormatProps = React.useCallback((newProps) => {
-        setFormatProps(newProps);
-        onUnitsChange && onUnitsChange(newProps);
-    }, [onUnitsChange]);
-    const handleUnitLabelChange = React.useCallback((newLabel, index) => {
-        // istanbul ignore else
-        if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {
-            const units = formatProps.composite.units.map((entry, ndx) => {
-                // istanbul ignore else
-                if (index === ndx)
-                    return { name: entry.name, label: newLabel };
-                else
-                    return entry;
-            });
-            const composite = { ...formatProps.composite, units };
-            const newFormatProps = { ...formatProps, composite };
-            handleSetFormatProps(newFormatProps);
-        }
-    }, [formatProps, handleSetFormatProps]);
-    const handleUnitChange = React.useCallback((newUnit, index) => {
-        const unitParts = newUnit.split(/:/);
-        if (unitParts[0] === "REMOVEUNIT") {
-            // istanbul ignore else
-            if (formatProps.composite && formatProps.composite.units.length > 1) {
-                const units = [...formatProps.composite.units];
-                units.pop();
-                const composite = { ...formatProps.composite, units };
-                const newFormatProps = { ...formatProps, composite };
-                handleSetFormatProps(newFormatProps);
-            }
-        }
-        else if (unitParts[0] === "ADDSUBUNIT") {
-            const units = formatProps.composite && formatProps.composite.units.length ?
-                [...formatProps.composite.units, { name: unitParts[1], label: unitParts[2] }] :
-                /* istanbul ignore next*/ [{ name: unitParts[1], label: unitParts[2] }];
-            const composite = { ...formatProps.composite, units };
-            const newFormatProps = { ...formatProps, composite };
-            handleSetFormatProps(newFormatProps);
-        }
-        else {
-            // istanbul ignore else
-            if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {
-                const units = formatProps.composite.units.map((entry, ndx) => {
-                    // istanbul ignore else
-                    if (index === ndx)
-                        return { name: unitParts[0], label: unitParts[1] };
-                    else
-                        return entry;
-                });
-                const composite = { ...formatProps.composite, units };
-                const newFormatProps = { ...formatProps, composite };
-                handleSetFormatProps(newFormatProps);
-            }
-            else if (!formatProps.composite) {
-                const composite = { units: [{ name: unitParts[0], label: unitParts[1] }] };
-                const newFormatProps = { ...formatProps, composite };
-                handleSetFormatProps(newFormatProps);
-            }
-        }
-    }, [formatProps, handleSetFormatProps]);
-    const handleOnSpacerChange = React.useCallback((e) => {
-        // istanbul ignore else
-        if (formatProps.composite) {
-            const spacerValue = e.target.value.length ? e.target.value[0] : /* istanbul ignore next */ ""; // spacer can only be empty or a single character
-            const composite = { ...formatProps.composite, spacer: spacerValue };
-            const newFormatProps = { ...formatProps, composite };
-            handleSetFormatProps(newFormatProps);
-        }
-    }, [formatProps, handleSetFormatProps]);
-    const compositeSpacer = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.compositeSpacer"));
-    return (React.createElement(React.Fragment, null,
-        ((_a = formatProps.composite) === null || _a === void 0 ? void 0 : _a.units)
-            ?
-                formatProps.composite.units.map((value, index) => {
-                    var _a;
-                    return React.createElement(UnitDescr, { key: value.name, name: value.name, label: (_a = value.label) !== null && _a !== void 0 ? _a : "", parentUnitName: index > 0 ? formatProps.composite.units[index - 1].name :
-                            undefined, unitsProvider: unitsProvider, index: index, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange, readonly: index < (formatProps.composite.units.length - 1) });
-                })
-            :
-                persistenceUnit && React.createElement(UnitDescr, { key: persistenceUnit.name, name: persistenceUnit.name, label: persistenceUnit.label, unitsProvider: unitsProvider, index: 0, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange }),
-        (((_b = formatProps.composite) === null || _b === void 0 ? void 0 : _b.units) && formatProps.composite.units.length > 1) &&
-            React.createElement(React.Fragment, null,
-                React.createElement("span", { key: "composite-spacer-label", className: "uicore-label" }, compositeSpacer.current),
-                React.createElement(Input, { key: "composite-spacer", "data-testid": "composite-spacer", value: (_c = formatProps.composite.spacer) !== null && _c !== void 0 ? _c : "", onChange: handleOnSpacerChange, 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 } from "@itwin/itwinui-react";
+import { UnitDescr } from "./misc/UnitDescr";
+import { UiIModelComponents } from "../UiIModelComponents";
+/** Component to show/edit Units used for Quantity Formatting.
+ * @alpha
+ */
+export function FormatUnits(props) {
+    const { initialFormat, persistenceUnit, unitsProvider, onUnitsChange } = props;
+    const initialFormatRef = React.useRef(initialFormat);
+    const [formatProps, setFormatProps] = React.useState(initialFormat);
+    React.useEffect(() => {
+        if (initialFormatRef.current !== initialFormat) {
+            initialFormatRef.current = initialFormat;
+            setFormatProps(initialFormat);
+        }
+    }, [initialFormat]);
+    const handleSetFormatProps = React.useCallback((newProps) => {
+        setFormatProps(newProps);
+        onUnitsChange && onUnitsChange(newProps);
+    }, [onUnitsChange]);
+    const handleUnitLabelChange = React.useCallback((newLabel, index) => {
+        // istanbul ignore else
+        if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {
+            const units = formatProps.composite.units.map((entry, ndx) => {
+                // istanbul ignore else
+                if (index === ndx)
+                    return { name: entry.name, label: newLabel };
+                else
+                    return entry;
+            });
+            const composite = { ...formatProps.composite, units };
+            const newFormatProps = { ...formatProps, composite };
+            handleSetFormatProps(newFormatProps);
+        }
+    }, [formatProps, handleSetFormatProps]);
+    const handleUnitChange = React.useCallback((newUnit, index) => {
+        const unitParts = newUnit.split(/:/);
+        if (unitParts[0] === "REMOVEUNIT") {
+            // istanbul ignore else
+            if (formatProps.composite && formatProps.composite.units.length > 1) {
+                const units = [...formatProps.composite.units];
+                units.pop();
+                const composite = { ...formatProps.composite, units };
+                const newFormatProps = { ...formatProps, composite };
+                handleSetFormatProps(newFormatProps);
+            }
+        }
+        else if (unitParts[0] === "ADDSUBUNIT") {
+            const units = formatProps.composite && formatProps.composite.units.length ?
+                [...formatProps.composite.units, { name: unitParts[1], label: unitParts[2] }] :
+                /* istanbul ignore next*/ [{ name: unitParts[1], label: unitParts[2] }];
+            const composite = { ...formatProps.composite, units };
+            const newFormatProps = { ...formatProps, composite };
+            handleSetFormatProps(newFormatProps);
+        }
+        else {
+            // istanbul ignore else
+            if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {
+                const units = formatProps.composite.units.map((entry, ndx) => {
+                    // istanbul ignore else
+                    if (index === ndx)
+                        return { name: unitParts[0], label: unitParts[1] };
+                    else
+                        return entry;
+                });
+                const composite = { ...formatProps.composite, units };
+                const newFormatProps = { ...formatProps, composite };
+                handleSetFormatProps(newFormatProps);
+            }
+            else if (!formatProps.composite) {
+                const composite = { units: [{ name: unitParts[0], label: unitParts[1] }] };
+                const newFormatProps = { ...formatProps, composite };
+                handleSetFormatProps(newFormatProps);
+            }
+        }
+    }, [formatProps, handleSetFormatProps]);
+    const handleOnSpacerChange = React.useCallback((e) => {
+        // istanbul ignore else
+        if (formatProps.composite) {
+            const spacerValue = e.target.value.length ? e.target.value[0] : /* istanbul ignore next */ ""; // spacer can only be empty or a single character
+            const composite = { ...formatProps.composite, spacer: spacerValue };
+            const newFormatProps = { ...formatProps, composite };
+            handleSetFormatProps(newFormatProps);
+        }
+    }, [formatProps, handleSetFormatProps]);
+    const compositeSpacer = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.compositeSpacer"));
+    return (React.createElement(React.Fragment, null,
+        (formatProps.composite?.units)
+            ?
+                formatProps.composite.units.map((value, index) => React.createElement(UnitDescr, { key: value.name, name: value.name, label: value.label ?? "", parentUnitName: index > 0 ? formatProps.composite.units[index - 1].name :
+                        undefined, unitsProvider: unitsProvider, index: index, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange, readonly: index < (formatProps.composite.units.length - 1) }))
+            :
+                persistenceUnit && React.createElement(UnitDescr, { key: persistenceUnit.name, name: persistenceUnit.name, label: persistenceUnit.label, unitsProvider: unitsProvider, index: 0, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange }),
+        (formatProps.composite?.units && formatProps.composite.units.length > 1) &&
+            React.createElement(React.Fragment, null,
+                React.createElement("span", { key: "composite-spacer-label", className: "uicore-label" }, compositeSpacer.current),
+                React.createElement(Input, { key: "composite-spacer", "data-testid": "composite-spacer", value: formatProps.composite.spacer ?? "", onChange: handleOnSpacerChange, size: "small" }))));
+}
 //# sourceMappingURL=FormatUnits.js.map

package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatUnits.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnits.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FormatProps, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UnitDescr } from \"./misc/UnitDescr\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties of [[FormatUnits]] component.\r\n * @alpha\r\n */\r\nexport interface FormatUnitsProps extends CommonProps {\r\n  initialFormat: FormatProps;\r\n  persistenceUnit?: UnitProps;\r\n  unitsProvider: UnitsProvider;\r\n  onUnitsChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to show/edit Units used for Quantity Formatting.\r\n * @alpha\r\n */\r\nexport function FormatUnits(props: FormatUnitsProps) {\r\n  const { initialFormat, persistenceUnit, unitsProvider, onUnitsChange } = props;\r\n  const initialFormatRef = React.useRef<FormatProps>(initialFormat);\r\n  const [formatProps, setFormatProps] = React.useState(initialFormat);\r\n\r\n  React.useEffect(() => {\r\n    if (initialFormatRef.current !== initialFormat) {\r\n      initialFormatRef.current = initialFormat;\r\n      setFormatProps(initialFormat);\r\n    }\r\n  }, [initialFormat]);\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    onUnitsChange && onUnitsChange(newProps);\r\n  }, [onUnitsChange]);\r\n\r\n  const handleUnitLabelChange = React.useCallback((newLabel: string, index: number) => {\r\n    // istanbul ignore else\r\n    if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {\r\n      const units = formatProps.composite.units.map((entry, ndx) => {\r\n        // istanbul ignore else\r\n        if (index === ndx)\r\n          return { name: entry.name, label: newLabel };\r\n        else\r\n          return entry;\r\n      });\r\n\r\n      const composite = { ...formatProps.composite, units };\r\n      const newFormatProps = { ...formatProps, composite };\r\n      handleSetFormatProps(newFormatProps);\r\n    }\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUnitChange = React.useCallback((newUnit: string, index: number) => {\r\n    const unitParts = newUnit.split(/:/);\r\n    if (unitParts[0] === \"REMOVEUNIT\") {\r\n      // istanbul ignore else\r\n      if (formatProps.composite && formatProps.composite.units.length > 1) {\r\n        const units = [...formatProps.composite.units];\r\n        units.pop();\r\n        const composite = { ...formatProps.composite, units };\r\n        const newFormatProps = { ...formatProps, composite };\r\n        handleSetFormatProps(newFormatProps);\r\n      }\r\n    } else if (unitParts[0] === \"ADDSUBUNIT\") {\r\n      const units = formatProps.composite && formatProps.composite.units.length ?\r\n        [...formatProps.composite.units, { name: unitParts[1], label: unitParts[2] }] :\r\n        /* istanbul ignore next*/[{ name: unitParts[1], label: unitParts[2] }];\r\n      const composite = { ...formatProps.composite, units };\r\n      const newFormatProps = { ...formatProps, composite };\r\n      handleSetFormatProps(newFormatProps);\r\n    } else {\r\n      // istanbul ignore else\r\n      if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {\r\n        const units = formatProps.composite.units.map((entry, ndx) => {\r\n          // istanbul ignore else\r\n          if (index === ndx)\r\n            return { name: unitParts[0], label: unitParts[1] };\r\n          else\r\n            return entry;\r\n        });\r\n        const composite = { ...formatProps.composite, units };\r\n        const newFormatProps = { ...formatProps, composite };\r\n        handleSetFormatProps(newFormatProps);\r\n      } else if (!formatProps.composite) {\r\n        const composite = { units: [{ name: unitParts[0], label: unitParts[1] }] };\r\n        const newFormatProps = { ...formatProps, composite };\r\n        handleSetFormatProps(newFormatProps);\r\n      }\r\n    }\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleOnSpacerChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (formatProps.composite) {\r\n      const spacerValue = e.target.value.length ? e.target.value[0] : /* istanbul ignore next */ \"\"; // spacer can only be empty or a single character\r\n      const composite = { ...formatProps.composite, spacer: spacerValue };\r\n      const newFormatProps = { ...formatProps, composite };\r\n      handleSetFormatProps(newFormatProps);\r\n    }\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const compositeSpacer = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.compositeSpacer\"));\r\n\r\n  return (\r\n    <>\r\n      {(formatProps.composite?.units)\r\n        ?\r\n        formatProps.composite.units.map((value, index) => <UnitDescr key={value.name} name={value.name}\r\n          label={value.label ?? \"\"} parentUnitName={index > 0 ? formatProps.composite!.units[index - 1].name :\r\n            undefined} unitsProvider={unitsProvider} index={index} onUnitChange={handleUnitChange} onLabelChange={handleUnitLabelChange}\r\n          readonly={index < (formatProps.composite!.units.length - 1)} />)\r\n        :\r\n        persistenceUnit && <UnitDescr key={persistenceUnit.name} name={persistenceUnit.name}\r\n          label={persistenceUnit.label} unitsProvider={unitsProvider} index={0} onUnitChange={handleUnitChange} onLabelChange={handleUnitLabelChange} />\r\n      }\r\n\r\n      {(formatProps.composite?.units && formatProps.composite.units.length > 1) &&\r\n        <>\r\n          <span key={\"composite-spacer-label\"} className={\"uicore-label\"}>{compositeSpacer.current}</span>\r\n          <Input key={\"composite-spacer\"} data-testid=\"composite-spacer\" value={formatProps.composite.spacer ?? \"\"} onChange={handleOnSpacerChange} size=\"small\" />\r\n        </>\r\n      }\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatUnits.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnits.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAY3D;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC/E,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAc,aAAa,CAAC,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,gBAAgB,CAAC,OAAO,KAAK,aAAa,EAAE;YAC9C,gBAAgB,CAAC,OAAO,GAAG,aAAa,CAAC;YACzC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACvE,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,aAAa,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,KAAa,EAAE,EAAE;QAClF,uBAAuB;QACvB,IAAI,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,CAAC,EAAE;YACrF,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;gBAC3D,uBAAuB;gBACvB,IAAI,KAAK,KAAK,GAAG;oBACf,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;;oBAE7C,OAAO,KAAK,CAAC;YACjB,CAAC,CAAC,CAAC;YAEH,MAAM,SAAS,GAAG,EAAE,GAAG,WAAW,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;YACtD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;YACrD,oBAAoB,CAAC,cAAc,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAe,EAAE,KAAa,EAAE,EAAE;QAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,YAAY,EAAE;YACjC,uBAAuB;YACvB,IAAI,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACnE,MAAM,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;gBAC/C,KAAK,CAAC,GAAG,EAAE,CAAC;gBACZ,MAAM,SAAS,GAAG,EAAE,GAAG,WAAW,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;gBACtD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;gBACrD,oBAAoB,CAAC,cAAc,CAAC,CAAC;aACtC;SACF;aAAM,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,YAAY,EAAE;YACxC,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBACzE,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC/E,yBAAyB,CAAA,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACzE,MAAM,SAAS,GAAG,EAAE,GAAG,WAAW,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;YACtD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;YACrD,oBAAoB,CAAC,cAAc,CAAC,CAAC;SACtC;aAAM;YACL,uBAAuB;YACvB,IAAI,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,CAAC,EAAE;gBACrF,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAC3D,uBAAuB;oBACvB,IAAI,KAAK,KAAK,GAAG;wBACf,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;;wBAEnD,OAAO,KAAK,CAAC;gBACjB,CAAC,CAAC,CAAC;gBACH,MAAM,SAAS,GAAG,EAAE,GAAG,WAAW,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;gBACtD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;gBACrD,oBAAoB,CAAC,cAAc,CAAC,CAAC;aACtC;iBAAM,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE;gBACjC,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC3E,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;gBACrD,oBAAoB,CAAC,cAAc,CAAC,CAAC;aACtC;SACF;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACxF,uBAAuB;QACvB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC,iDAAiD;YAChJ,MAAM,SAAS,GAAG,EAAE,GAAG,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;YACpE,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;YACrD,oBAAoB,CAAC,cAAc,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,uCAAuC,CAAC,CAAC,CAAC;IAE5G,OAAO,CACL;QACG,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC;YAC7B,CAAC;gBACD,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,SAAS,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAC5F,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,cAAc,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAU,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;wBAClG,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,qBAAqB,EAC7H,QAAQ,EAAE,KAAK,GAAG,CAAC,WAAW,CAAC,SAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAI,CAAC;YAClE,CAAC;gBACD,eAAe,IAAI,oBAAC,SAAS,IAAC,GAAG,EAAE,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,CAAC,IAAI,EACjF,KAAK,EAAE,eAAe,CAAC,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,qBAAqB,GAAI;QAGjJ,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YACvE;gBACE,8BAAM,GAAG,EAAE,wBAAwB,EAAE,SAAS,EAAE,cAAc,IAAG,eAAe,CAAC,OAAO,CAAQ;gBAChG,oBAAC,KAAK,IAAC,GAAG,EAAE,kBAAkB,iBAAc,kBAAkB,EAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE,EAAE,QAAQ,EAAE,oBAAoB,EAAE,IAAI,EAAC,OAAO,GAAG,CACxJ,CAEJ,CACJ,CAAC;AACJ,CAAC","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, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UnitDescr } from \"./misc/UnitDescr\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties of [[FormatUnits]] component.\r\n * @alpha\r\n */\r\nexport interface FormatUnitsProps extends CommonProps {\r\n  initialFormat: FormatProps;\r\n  persistenceUnit?: UnitProps;\r\n  unitsProvider: UnitsProvider;\r\n  onUnitsChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to show/edit Units used for Quantity Formatting.\r\n * @alpha\r\n */\r\nexport function FormatUnits(props: FormatUnitsProps) {\r\n  const { initialFormat, persistenceUnit, unitsProvider, onUnitsChange } = props;\r\n  const initialFormatRef = React.useRef<FormatProps>(initialFormat);\r\n  const [formatProps, setFormatProps] = React.useState(initialFormat);\r\n\r\n  React.useEffect(() => {\r\n    if (initialFormatRef.current !== initialFormat) {\r\n      initialFormatRef.current = initialFormat;\r\n      setFormatProps(initialFormat);\r\n    }\r\n  }, [initialFormat]);\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    onUnitsChange && onUnitsChange(newProps);\r\n  }, [onUnitsChange]);\r\n\r\n  const handleUnitLabelChange = React.useCallback((newLabel: string, index: number) => {\r\n    // istanbul ignore else\r\n    if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {\r\n      const units = formatProps.composite.units.map((entry, ndx) => {\r\n        // istanbul ignore else\r\n        if (index === ndx)\r\n          return { name: entry.name, label: newLabel };\r\n        else\r\n          return entry;\r\n      });\r\n\r\n      const composite = { ...formatProps.composite, units };\r\n      const newFormatProps = { ...formatProps, composite };\r\n      handleSetFormatProps(newFormatProps);\r\n    }\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUnitChange = React.useCallback((newUnit: string, index: number) => {\r\n    const unitParts = newUnit.split(/:/);\r\n    if (unitParts[0] === \"REMOVEUNIT\") {\r\n      // istanbul ignore else\r\n      if (formatProps.composite && formatProps.composite.units.length > 1) {\r\n        const units = [...formatProps.composite.units];\r\n        units.pop();\r\n        const composite = { ...formatProps.composite, units };\r\n        const newFormatProps = { ...formatProps, composite };\r\n        handleSetFormatProps(newFormatProps);\r\n      }\r\n    } else if (unitParts[0] === \"ADDSUBUNIT\") {\r\n      const units = formatProps.composite && formatProps.composite.units.length ?\r\n        [...formatProps.composite.units, { name: unitParts[1], label: unitParts[2] }] :\r\n        /* istanbul ignore next*/[{ name: unitParts[1], label: unitParts[2] }];\r\n      const composite = { ...formatProps.composite, units };\r\n      const newFormatProps = { ...formatProps, composite };\r\n      handleSetFormatProps(newFormatProps);\r\n    } else {\r\n      // istanbul ignore else\r\n      if (formatProps.composite && formatProps.composite.units.length > index && index >= 0) {\r\n        const units = formatProps.composite.units.map((entry, ndx) => {\r\n          // istanbul ignore else\r\n          if (index === ndx)\r\n            return { name: unitParts[0], label: unitParts[1] };\r\n          else\r\n            return entry;\r\n        });\r\n        const composite = { ...formatProps.composite, units };\r\n        const newFormatProps = { ...formatProps, composite };\r\n        handleSetFormatProps(newFormatProps);\r\n      } else if (!formatProps.composite) {\r\n        const composite = { units: [{ name: unitParts[0], label: unitParts[1] }] };\r\n        const newFormatProps = { ...formatProps, composite };\r\n        handleSetFormatProps(newFormatProps);\r\n      }\r\n    }\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleOnSpacerChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (formatProps.composite) {\r\n      const spacerValue = e.target.value.length ? e.target.value[0] : /* istanbul ignore next */ \"\"; // spacer can only be empty or a single character\r\n      const composite = { ...formatProps.composite, spacer: spacerValue };\r\n      const newFormatProps = { ...formatProps, composite };\r\n      handleSetFormatProps(newFormatProps);\r\n    }\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const compositeSpacer = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.compositeSpacer\"));\r\n\r\n  return (\r\n    <>\r\n      {(formatProps.composite?.units)\r\n        ?\r\n        formatProps.composite.units.map((value, index) => <UnitDescr key={value.name} name={value.name}\r\n          label={value.label ?? \"\"} parentUnitName={index > 0 ? formatProps.composite!.units[index - 1].name :\r\n            undefined} unitsProvider={unitsProvider} index={index} onUnitChange={handleUnitChange} onLabelChange={handleUnitLabelChange}\r\n          readonly={index < (formatProps.composite!.units.length - 1)} />)\r\n        :\r\n        persistenceUnit && <UnitDescr key={persistenceUnit.name} name={persistenceUnit.name}\r\n          label={persistenceUnit.label} unitsProvider={unitsProvider} index={0} onUnitChange={handleUnitChange} onLabelChange={handleUnitLabelChange} />\r\n      }\r\n\r\n      {(formatProps.composite?.units && formatProps.composite.units.length > 1) &&\r\n        <>\r\n          <span key={\"composite-spacer-label\"} className={\"uicore-label\"}>{compositeSpacer.current}</span>\r\n          <Input key={\"composite-spacer\"} data-testid=\"composite-spacer\" value={formatProps.composite.spacer ?? \"\"} onChange={handleOnSpacerChange} size=\"small\" />\r\n        </>\r\n      }\r\n    </>\r\n  );\r\n}\r\n"]}

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

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps } from "@itwin/core-quantity";
-/** Properties of [[MiscFormatOptions]] component.
- * @alpha
- */
-export interface MiscFormatOptionsProps extends CommonProps {
-    formatProps: FormatProps;
-    onChange?: (format: FormatProps) => void;
-    enableMinimumProperties?: boolean;
-    showOptions: boolean;
-    onShowHideOptions: (show: boolean) => void;
-    children?: React.ReactNode;
-}
-/** Component use to set miscellaneous properties is a Formatted Quantity.
- * @alpha
- */
-export declare function MiscFormatOptions(props: MiscFormatOptionsProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[MiscFormatOptions]] component.
+ * @alpha
+ */
+export interface MiscFormatOptionsProps extends CommonProps {
+    formatProps: FormatProps;
+    onChange?: (format: FormatProps) => void;
+    enableMinimumProperties?: boolean;
+    showOptions: boolean;
+    onShowHideOptions: (show: boolean) => void;
+    children?: React.ReactNode;
+}
+/** Component use to set miscellaneous properties is a Formatted Quantity.
+ * @alpha
+ */
+export declare function MiscFormatOptions(props: MiscFormatOptionsProps): JSX.Element;
 //# sourceMappingURL=MiscFormatOptions.d.ts.map