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

package/lib/esm/imodel-components-react/editors/WeightEditor.js

@@ -1,134 +1,134 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./WeightEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
-import { WeightPickerButton } from "../lineweight/WeightPickerButton";
-/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
- * @public
- */
-export class WeightEditor extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._control = null;
-        this._isMounted = false;
-        this._availableWeights = [];
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            weightValue: 0,
-            readonly: false,
-        };
-        this._onLineWeightPick = (weight) => {
-            const propertyRecord = this.props.propertyRecord;
-            this.setState({
-                weightValue: weight,
-            }, async () => {
-                // istanbul ignore else
-                if (propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (propertyValue !== undefined) {
-                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
-                    }
-                }
-            });
-        };
-        // TODO: add support for following if we need to specify set of weights to display
-        //  const record = this.props.propertyRecord;
-        //  if (record && record.property && record.property.editor && record.property.editor.params) {
-        //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;
-        //    // istanbul ignore else
-        //    if (weightParams) {
-        //      weightParams.weightValues.forEach((weight: number) => {
-        //        this._availableWeights.push(weight);
-        //      });
-        //    }
-        //   }
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: this.state.weightValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this._divElement.current)
-            containsFocus = this._divElement.current.contains(document.activeElement);
-        return containsFocus;
-    }
-    setFocus() {
-        // istanbul ignore else
-        if (this._control && !this.state.isDisabled) {
-            this._control.setFocus();
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        let initialValue = 0;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            initialValue = record.value.value;
-        }
-        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
-        const isDisabled = record ? record.isDisabled : undefined;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {
-                if (this.props.setFocus) {
-                    this.setFocus();
-                }
-            });
-    }
-    /** @internal */
-    render() {
-        return (React.createElement("div", { className: classnames("components-weight-editor", this.props.className), style: this.props.style, ref: this._divElement },
-            React.createElement(WeightPickerButton, { ref: (control) => this._control = control, activeWeight: this.state.weightValue, weights: this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onLineWeightPick: this._onLineWeightPick, "data-testid": "components-weight-editor" })));
-    }
-}
-/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
- * It uses the [[WeightEditor]] React component.
- * @public
- */
-export class WeightPropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get reactNode() {
-        return React.createElement(WeightEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./WeightEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
+import { WeightPickerButton } from "../lineweight/WeightPickerButton";
+/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
+ * @public
+ */
+export class WeightEditor extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._control = null;
+        this._isMounted = false;
+        this._availableWeights = [];
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            weightValue: 0,
+            readonly: false,
+        };
+        this._onLineWeightPick = (weight) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                weightValue: weight,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+        // TODO: add support for following if we need to specify set of weights to display
+        //  const record = this.props.propertyRecord;
+        //  if (record && record.property && record.property.editor && record.property.editor.params) {
+        //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;
+        //    // istanbul ignore else
+        //    if (weightParams) {
+        //      weightParams.weightValues.forEach((weight: number) => {
+        //        this._availableWeights.push(weight);
+        //      });
+        //    }
+        //   }
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.weightValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._control && !this.state.isDisabled) {
+            this._control.setFocus();
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = 0;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            initialValue = record.value.value;
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        const isDisabled = record ? record.isDisabled : undefined;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+    }
+    /** @internal */
+    render() {
+        return (React.createElement("div", { className: classnames("components-weight-editor", this.props.className), style: this.props.style, ref: this._divElement },
+            React.createElement(WeightPickerButton, { ref: (control) => this._control = control, activeWeight: this.state.weightValue, weights: this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onLineWeightPick: this._onLineWeightPick, "data-testid": "components-weight-editor" })));
+    }
+}
+/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
+ * It uses the [[WeightEditor]] React component.
+ * @public
+ */
+export class WeightPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get reactNode() {
+        return React.createElement(WeightEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);
 //# sourceMappingURL=WeightEditor.js.map

package/lib/esm/imodel-components-react/editors/WeightEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal */\ninterface WeightEditorState {\n  weightValue: number;\n  readonly: boolean;\n  isDisabled?: boolean;\n}\n\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n */\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\n  private _control: any | null = null;\n  private _isMounted = false;\n  private _availableWeights: number[] = [];\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  /** @internal */\n  public override readonly state: Readonly<WeightEditorState> = {\n    weightValue: 0,\n    readonly: false,\n  };\n\n  constructor(props: PropertyEditorProps) {\n    super(props);\n\n    // TODO: add support for following if we need to specify set of weights to display\n    //  const record = this.props.propertyRecord;\n    //  if (record && record.property && record.property.editor && record.property.editor.params) {\n    //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n    //    // istanbul ignore else\n    //    if (weightParams) {\n    //      weightParams.weightValues.forEach((weight: number) => {\n    //        this._availableWeights.push(weight);\n    //      });\n    //    }\n    //   }\n  }\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.weightValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    // istanbul ignore else\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._control && !this.state.isDisabled) {\n      this._control.setFocus();\n    }\n  }\n\n  private _onLineWeightPick = (weight: number) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      weightValue: weight,\n    }, async () => {\n      // istanbul ignore else\n      if (propertyRecord && this.props.onCommit) {\n        const propertyValue = await this.getPropertyValue();\n        // istanbul ignore else\n        if (propertyValue !== undefined) {\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = 0;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as number;\n    }\n\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState(\n        { weightValue: initialValue, readonly, isDisabled },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n  }\n\n  /** @internal */\n  public override render() {\n    return (\n      <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n        <WeightPickerButton ref={(control) => this._control = control}\n          activeWeight={this.state.weightValue}\n          weights={this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined}\n          disabled={this.state.isDisabled ? true : false}\n          readonly={this.state.readonly}\n          onLineWeightPick={this._onLineWeightPick}\n          data-testid=\"components-weight-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n  // istanbul ignore next\n  public get reactNode(): React.ReactNode {\n    return <WeightEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\n"]}
+{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./WeightEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\r\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\r\n\r\n// cspell:ignore lineweight\r\n\r\n/** @internal */\r\ninterface WeightEditorState {\r\n  weightValue: number;\r\n  readonly: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\r\n * @public\r\n */\r\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\r\n  private _control: any | null = null;\r\n  private _isMounted = false;\r\n  private _availableWeights: number[] = [];\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<WeightEditorState> = {\r\n    weightValue: 0,\r\n    readonly: false,\r\n  };\r\n\r\n  constructor(props: PropertyEditorProps) {\r\n    super(props);\r\n\r\n    // TODO: add support for following if we need to specify set of weights to display\r\n    //  const record = this.props.propertyRecord;\r\n    //  if (record && record.property && record.property.editor && record.property.editor.params) {\r\n    //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\r\n    //    // istanbul ignore else\r\n    //    if (weightParams) {\r\n    //      weightParams.weightValues.forEach((weight: number) => {\r\n    //        this._availableWeights.push(weight);\r\n    //      });\r\n    //    }\r\n    //   }\r\n  }\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.weightValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._divElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    let containsFocus = false;\r\n    // istanbul ignore else\r\n    if (this._divElement.current)\r\n      containsFocus = this._divElement.current.contains(document.activeElement);\r\n    return containsFocus;\r\n  }\r\n\r\n  private setFocus(): void {\r\n    // istanbul ignore else\r\n    if (this._control && !this.state.isDisabled) {\r\n      this._control.setFocus();\r\n    }\r\n  }\r\n\r\n  private _onLineWeightPick = (weight: number) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    this.setState({\r\n      weightValue: weight,\r\n    }, async () => {\r\n      // istanbul ignore else\r\n      if (propertyRecord && this.props.onCommit) {\r\n        const propertyValue = await this.getPropertyValue();\r\n        // istanbul ignore else\r\n        if (propertyValue !== undefined) {\r\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const record = this.props.propertyRecord;\r\n    let initialValue = 0;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      initialValue = record.value.value as number;\r\n    }\r\n\r\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n    const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState(\r\n        { weightValue: initialValue, readonly, isDisabled },\r\n        () => {\r\n          if (this.props.setFocus) {\r\n            this.setFocus();\r\n          }\r\n        },\r\n      );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    return (\r\n      <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n        <WeightPickerButton ref={(control) => this._control = control}\r\n          activeWeight={this.state.weightValue}\r\n          weights={this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined}\r\n          disabled={this.state.isDisabled ? true : false}\r\n          readonly={this.state.readonly}\r\n          onLineWeightPick={this._onLineWeightPick}\r\n          data-testid=\"components-weight-editor\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\r\n * It uses the [[WeightEditor]] React component.\r\n * @public\r\n */\r\nexport class WeightPropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public get reactNode(): React.ReactNode {\r\n    return <WeightEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\r\n"]}

package/lib/esm/imodel-components-react/editors/WeightEditor.scss

@@ -1,16 +1,16 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-$components-weight-editor-item-height: 100%;
-
-.components-weight-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
-  border: none;
-  box-sizing: border-box;
-  height: $components-weight-editor-item-height;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$components-weight-editor-item-height: 100%;
+
+.components-weight-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  box-sizing: border-box;
+  height: $components-weight-editor-item-height;
+}

package/lib/esm/imodel-components-react/inputs/QuantityInput.d.ts

@@ -1,26 +1,26 @@
-/** @packageDocumentation
- * @module Inputs
- */
-import * as React from "react";
-import { QuantityTypeArg } from "@itwin/core-frontend";
-import { CommonProps } from "@itwin/core-react";
-/** Props for [[QuantityInput]] control
- * @beta
- */
-export interface QuantityProps extends CommonProps {
-    /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */
-    initialValue: number;
-    /** Type of quantity being input. */
-    quantityType: QuantityTypeArg;
-    /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */
-    onQuantityChange: (newQuantityValue: number) => void;
-    /** Set to `true` if value is for display only */
-    readonly?: boolean;
-    /** Provides ability to return reference to HTMLInputElement */
-    ref?: React.Ref<HTMLInputElement>;
-}
-/** Input control that allows users to input a quantity and show the formatted string that represents the value.
- * @beta
- */
-export declare function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps): JSX.Element;
+/** @packageDocumentation
+ * @module Inputs
+ */
+import * as React from "react";
+import { QuantityTypeArg } from "@itwin/core-frontend";
+import { CommonProps } from "@itwin/core-react";
+/** Props for [[QuantityInput]] control
+ * @beta
+ */
+export interface QuantityProps extends CommonProps {
+    /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */
+    initialValue: number;
+    /** Type of quantity being input. */
+    quantityType: QuantityTypeArg;
+    /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */
+    onQuantityChange: (newQuantityValue: number) => void;
+    /** Set to `true` if value is for display only */
+    readonly?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Input control that allows users to input a quantity and show the formatted string that represents the value.
+ * @beta
+ */
+export declare function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps): JSX.Element;
 //# sourceMappingURL=QuantityInput.d.ts.map

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

@@ -1,71 +1,71 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Inputs
- */
-import classnames from "classnames";
-import * as React from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { Parser } from "@itwin/core-quantity";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { ParsedInput } from "@itwin/components-react";
-/** Input control that allows users to input a quantity and show the formatted string that represents the value.
- * @beta
- */
-export function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }) {
-    const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-    const formatValue = React.useCallback((value) => {
-        // istanbul ignore else
-        if (formatterSpec) {
-            return formatterSpec.applyFormatting(value);
-        }
-        // istanbul ignore next
-        return value.toFixed(2);
-    }, [formatterSpec]);
-    const parseString = React.useCallback((userInput) => {
-        // istanbul ignore else
-        if (parserSpec) {
-            const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);
-            // istanbul ignore else
-            if (Parser.isParsedQuantity(parseResult)) {
-                return { value: parseResult.value };
-            }
-            else {
-                const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : "Unknown";
-                return { parseError: `${UiIModelComponents.translate("QuantityInput.NoParserDefined")}${statusId}` };
-            }
-        }
-        // istanbul ignore next
-        return { parseError: UiIModelComponents.translate("QuantityInput.NoParserDefined") };
-    }, [parserSpec]);
-    const classNames = classnames(className, "components-quantity-input");
-    React.useEffect(() => {
-        const handleUnitSystemChanged = (() => {
-            setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-            setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-        });
-        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [quantityType]);
-    React.useEffect(() => {
-        const handleUnitSystemChanged = ((args) => {
-            const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);
-            // istanbul ignore else
-            if (args.quantityType === quantityKey) {
-                setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
-                setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
-            }
-        });
-        IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [quantityType]);
-    return React.createElement(ParsedInput, { "data-testid": "components-quantity-input", ref: ref, style: style, className: classNames, onChange: onQuantityChange, initialValue: initialValue, readonly: readonly, formatValue: formatValue, parseString: parseString });
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { Parser } from "@itwin/core-quantity";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { ParsedInput } from "@itwin/components-react";
+/** Input control that allows users to input a quantity and show the formatted string that represents the value.
+ * @beta
+ */
+export function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }) {
+    const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+    const formatValue = React.useCallback((value) => {
+        // istanbul ignore else
+        if (formatterSpec) {
+            return formatterSpec.applyFormatting(value);
+        }
+        // istanbul ignore next
+        return value.toFixed(2);
+    }, [formatterSpec]);
+    const parseString = React.useCallback((userInput) => {
+        // istanbul ignore else
+        if (parserSpec) {
+            const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);
+            // istanbul ignore else
+            if (Parser.isParsedQuantity(parseResult)) {
+                return { value: parseResult.value };
+            }
+            else {
+                const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : "Unknown";
+                return { parseError: `${UiIModelComponents.translate("QuantityInput.NoParserDefined")}${statusId}` };
+            }
+        }
+        // istanbul ignore next
+        return { parseError: UiIModelComponents.translate("QuantityInput.NoParserDefined") };
+    }, [parserSpec]);
+    const classNames = classnames(className, "components-quantity-input");
+    React.useEffect(() => {
+        const handleUnitSystemChanged = (() => {
+            setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+            setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+        });
+        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [quantityType]);
+    React.useEffect(() => {
+        const handleUnitSystemChanged = ((args) => {
+            const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);
+            // istanbul ignore else
+            if (args.quantityType === quantityKey) {
+                setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));
+                setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));
+            }
+        });
+        IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [quantityType]);
+    return React.createElement(ParsedInput, { "data-testid": "components-quantity-input", ref: ref, style: style, className: classNames, onChange: onQuantityChange, initialValue: initialValue, readonly: readonly, formatValue: formatValue, parseString: parseString });
+}
 //# sourceMappingURL=QuantityInput.js.map

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

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