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

package/lib/esm/components-react/editors/EnumEditor.js

@@ -1,162 +1,162 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./EnumEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyValueFormat, StandardTypeNames } from "@itwin/appui-abstract";
-import { Select } from "@itwin/itwinui-react";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-import { UiComponents } from "../UiComponents";
-/** EnumEditor React component that is a property editor with select input
-  * @public
-  */
-export class EnumEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._ariaLabel = UiComponents.translate("editor.enum");
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            selectValue: "",
-            valueIsNumber: false,
-            options: [],
-            parentDiv: null,
-        };
-        this._updateSelectValue = (newValue) => {
-            // istanbul ignore else
-            if (this._isMounted) {
-                let selectValue;
-                // istanbul ignore if
-                if (this.state.valueIsNumber)
-                    selectValue = parseInt(newValue, 10);
-                else
-                    selectValue = newValue;
-                this.setState({
-                    selectValue,
-                }, async () => {
-                    // istanbul ignore else
-                    if (this.props.propertyRecord && this.props.onCommit) {
-                        const propertyValue = await this.getPropertyValue();
-                        // istanbul ignore else
-                        if (propertyValue) {
-                            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
-                        }
-                    }
-                });
-            }
-        };
-    }
-    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.selectValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    // istanbul ignore next
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    // istanbul ignore next
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this._divElement.current)
-            containsFocus = this._divElement.current.contains(document.activeElement);
-        return containsFocus;
-    }
-    /** @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 { propertyRecord } = this.props;
-        let initialValue = "";
-        let valueIsNumber = false;
-        // istanbul ignore else
-        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
-            const primitiveValue = propertyRecord.value.value;
-            if (typeof primitiveValue === "string") {
-                initialValue = primitiveValue;
-                valueIsNumber = false;
-            }
-            else {
-                initialValue = primitiveValue;
-                valueIsNumber = true;
-            }
-        }
-        let choices;
-        if (propertyRecord && propertyRecord.property.enum) {
-            // istanbul ignore else
-            if (propertyRecord.property.enum.choices instanceof Promise) {
-                choices = await propertyRecord.property.enum.choices;
-            }
-            else {
-                choices = propertyRecord.property.enum.choices;
-            }
-        }
-        const options = [];
-        if (choices) {
-            choices.forEach((choice) => {
-                options.push({ value: choice.value.toString(), label: choice.label });
-            });
-        }
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ selectValue: initialValue, valueIsNumber, options, parentDiv: this._divElement.current });
-    }
-    /** @internal */
-    render() {
-        const className = classnames("components-cell-editor", "components-enum-editor", this.props.className);
-        const selectValue = this.state.selectValue !== undefined ? this.state.selectValue.toString() : /* istanbul ignore next */ undefined;
-        // set min-width to show about 4 characters + down arrow
-        const minWidthStyle = {
-            minWidth: `6em`,
-        };
-        // The iTwinUI-react Select onBlur still does not work properly, so it cannot be used yet. NEEDSWORK
-        // onBlur={this.props.onBlur}
-        return (React.createElement("div", { ref: this._divElement },
-            React.createElement(Select, { className: className, style: this.props.style ? this.props.style : minWidthStyle, value: selectValue, onChange: this._updateSelectValue, "data-testid": "components-select-editor", options: this.state.options, setFocus: this.props.setFocus, "aria-label": this._ariaLabel, size: "small" })));
-    }
-}
-/** Enum Property Button Group Editor registered for the "enum" type name.
-  * It uses the [[EnumEditor]] React component.
-  * @public
-  */
-export class EnumPropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get containerHandlesEnter() {
-        return false;
-    }
-    get containerStopsKeydownPropagation() {
-        return false;
-    }
-    get reactNode() {
-        return React.createElement(EnumEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Enum, EnumPropertyEditor);
+/*---------------------------------------------------------------------------------------------
+* 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 "./EnumEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardTypeNames } from "@itwin/appui-abstract";
+import { Select } from "@itwin/itwinui-react";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { UiComponents } from "../UiComponents";
+/** EnumEditor React component that is a property editor with select input
+  * @public
+  */
+export class EnumEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._ariaLabel = UiComponents.translate("editor.enum");
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            selectValue: "",
+            valueIsNumber: false,
+            options: [],
+            parentDiv: null,
+        };
+        this._updateSelectValue = (newValue) => {
+            // istanbul ignore else
+            if (this._isMounted) {
+                let selectValue;
+                // istanbul ignore if
+                if (this.state.valueIsNumber)
+                    selectValue = parseInt(newValue, 10);
+                else
+                    selectValue = newValue;
+                this.setState({
+                    selectValue,
+                }, async () => {
+                    // istanbul ignore else
+                    if (this.props.propertyRecord && this.props.onCommit) {
+                        const propertyValue = await this.getPropertyValue();
+                        // istanbul ignore else
+                        if (propertyValue) {
+                            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
+                        }
+                    }
+                });
+            }
+        };
+    }
+    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.selectValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    // istanbul ignore next
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    // istanbul ignore next
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    /** @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 { propertyRecord } = this.props;
+        let initialValue = "";
+        let valueIsNumber = false;
+        // istanbul ignore else
+        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            if (typeof primitiveValue === "string") {
+                initialValue = primitiveValue;
+                valueIsNumber = false;
+            }
+            else {
+                initialValue = primitiveValue;
+                valueIsNumber = true;
+            }
+        }
+        let choices;
+        if (propertyRecord && propertyRecord.property.enum) {
+            // istanbul ignore else
+            if (propertyRecord.property.enum.choices instanceof Promise) {
+                choices = await propertyRecord.property.enum.choices;
+            }
+            else {
+                choices = propertyRecord.property.enum.choices;
+            }
+        }
+        const options = [];
+        if (choices) {
+            choices.forEach((choice) => {
+                options.push({ value: choice.value.toString(), label: choice.label });
+            });
+        }
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ selectValue: initialValue, valueIsNumber, options, parentDiv: this._divElement.current });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-enum-editor", this.props.className);
+        const selectValue = this.state.selectValue !== undefined ? this.state.selectValue.toString() : /* istanbul ignore next */ undefined;
+        // set min-width to show about 4 characters + down arrow
+        const minWidthStyle = {
+            minWidth: `6em`,
+        };
+        // The iTwinUI-react Select onBlur still does not work properly, so it cannot be used yet. NEEDSWORK
+        // onBlur={this.props.onBlur}
+        return (React.createElement("div", { ref: this._divElement },
+            React.createElement(Select, { className: className, style: this.props.style ? this.props.style : minWidthStyle, value: selectValue, onChange: this._updateSelectValue, "data-testid": "components-select-editor", options: this.state.options, setFocus: this.props.setFocus, "aria-label": this._ariaLabel, size: "small" })));
+    }
+}
+/** Enum Property Button Group Editor registered for the "enum" type name.
+  * It uses the [[EnumEditor]] React component.
+  * @public
+  */
+export class EnumPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get containerHandlesEnter() {
+        return false;
+    }
+    get containerStopsKeydownPropagation() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(EnumEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Enum, EnumPropertyEditor);
 //# sourceMappingURL=EnumEditor.js.map

package/lib/esm/components-react/editors/EnumEditor.scss

@@ -2,7 +2,7 @@
 * 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/variables";
+@import "./variables";
 
 .components-enum-editor {
   width: 100%;
@@ -14,7 +14,7 @@
   .components-enum-editor {
     &.iui-select {
       >.iui-select-button {
-        min-height: $uicore-component-height-small !important;
+        min-height: $editor-component-height-small !important;
         padding-top: 0px !important;
         padding-bottom: 0px !important;
       }

package/lib/esm/components-react/editors/IconEditor.d.ts

@@ -1,48 +1,48 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./IconEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-import { PropertyEditorBase } from "./PropertyEditorManager";
-/** @internal */
-interface IconEditorState {
-    icon: string;
-    icons: string[];
-    numColumns: number;
-    readonly?: boolean;
-    isDisabled?: boolean;
-}
-/** IconEditor React component that is a property editor with button and popup
- * @alpha
- */
-export declare class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {
-    private _control;
-    private _isMounted;
-    private _divElement;
-    constructor(props: PropertyEditorProps);
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private setFocus;
-    private _onIconChange;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): JSX.Element;
-}
-/** Icon Property Editor registered for the "text" and "string" type names and the "icon-picker" editor name.
- * It uses the [[IconEditor]] React component.
- * @alpha
- */
-export declare class IconPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./IconEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+import { PropertyEditorBase } from "./PropertyEditorManager";
+/** @internal */
+interface IconEditorState {
+    icon: string;
+    icons: string[];
+    numColumns: number;
+    readonly?: boolean;
+    isDisabled?: boolean;
+}
+/** IconEditor React component that is a property editor with button and popup
+ * @alpha
+ */
+export declare class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {
+    private _control;
+    private _isMounted;
+    private _divElement;
+    constructor(props: PropertyEditorProps);
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private setFocus;
+    private _onIconChange;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Icon Property Editor registered for the "text" and "string" type names and the "icon-picker" editor name.
+ * It uses the [[IconEditor]] React component.
+ * @alpha
+ */
+export declare class IconPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=IconEditor.d.ts.map