npm - @itwin/components-react - Versions diffs - 4.0.0-dev.7 → 4.0.0-dev.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (556) hide show

package/lib/cjs/components-react/editors/BooleanEditor.d.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export declare class BooleanEditor extends React.PureComponent<PropertyEditorPro
     /** @internal */
     readonly state: Readonly<BooleanEditorState>;
     getPropertyValue(): Promise<PropertyValue | undefined>;
+    private getPropertyValueSync;
     get htmlElement(): HTMLElement | null;
     get hasFocus(): boolean;
     private _updateCheckboxValue;

package/lib/cjs/components-react/editors/BooleanEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAA0C,MAAM,uBAAuB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAEpF,gBAAgB;AAChB,UAAU,kBAAkB;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,kBAAkB,CAAE,YAAW,UAAU;IACnH,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAG1D;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;~~IAgBnE~~,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,oBAAoB,~~CA2B1B~~;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;~~YAMnD~~,iBAAiB;~~IAoB/B~~,gBAAgB;IACA,MAAM;CAmBvB;AAED;;;GAGG;AACH,qBAAa,qBAAsB,SAAQ,kBAAkB;IAE3D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
1	+ {"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAA0C,MAAM,uBAAuB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAEpF,gBAAgB;AAChB,UAAU,kBAAkB;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,kBAAkB,CAAE,YAAW,UAAU;IACnH,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAG1D;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAInE,OAAO,CAAC,oBAAoB;IAgB5B,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,oBAAoB,CAkB1B;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,OAAO,CAAC,iBAAiB;IAoBzB,gBAAgB;IACA,MAAM;CAmBvB;AAED;;;GAGG;AACH,qBAAa,qBAAsB,SAAQ,kBAAkB;IAE3D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

package/lib/cjs/components-react/editors/BooleanEditor.js CHANGED Viewed

@@ -52,21 +52,13 @@ class BooleanEditor extends React.PureComponent {
         this._updateCheckboxValue = (e) => {
             // istanbul ignore else
             if (this._isMounted) {
-                let checkboxValue = false;
-                // istanbul ignore if
-                if (e.target.checked !== undefined) // Needed for unit test environment
-                    checkboxValue = e.target.checked;
-                else {
-                    // istanbul ignore else
-                    if (e.target.value !== undefined && typeof e.target.value === "boolean")
-                        checkboxValue = e.target.value;
-                }
+                const checkboxValue = !!e.target.checked;
                 this.setState({
                     checkboxValue,
-                }, async () => {
+                }, () => {
                     // istanbul ignore else
                     if (this.props.propertyRecord && this.props.onCommit) {
-                        const propertyValue = await this.getPropertyValue();
+                        const propertyValue = this.getPropertyValueSync();
                         // istanbul ignore else
                         if (propertyValue !== undefined) {
                             this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
@@ -77,6 +69,9 @@ class BooleanEditor extends React.PureComponent {
         };
     }
     async getPropertyValue() {
+        return this.getPropertyValueSync();
+    }
+    getPropertyValueSync() {
         const record = this.props.propertyRecord;
         let propertyValue;
         // istanbul ignore else
@@ -98,7 +93,7 @@ class BooleanEditor extends React.PureComponent {
     /** @internal */
     componentDidMount() {
         this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        this.setStateFromProps();
     }
     /** @internal */
     componentWillUnmount() {
@@ -107,10 +102,10 @@ class BooleanEditor extends React.PureComponent {
     /** @internal */
     componentDidUpdate(prevProps) {
         if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+            this.setStateFromProps();
         }
     }
-    async setStateFromProps() {
+    setStateFromProps() {
         const { propertyRecord } = this.props;
         let checkboxValue = false;
         let isDisabled = false;

package/lib/cjs/components-react/editors/BooleanEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,0DAA8F;AAC9F,wDAAgD;AAEhD,mEAAoF;AAQpF;;GAEG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAsD;IAA/F;;QACU,eAAU,GAAG,KAAK,CAAC;QACnB,kBAAa,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QAE5D,gBAAgB;QACS,UAAK,GAAiC;YAC7D,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,KAAK;SAClB,CAAC;~~QA0BM~~,yBAAoB,GAAG,CAAC,CAAsC,EAAE,EAAE;YACxE,uBAAuB;YACvB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,~~IAAI,aAAa,GAAY,KAAK,CAAC;gBAEnC,qBAAqB;gBACrB,IAAI,CAAC,CAAC,~~MAAM,~~CAAC,OAAO,KAAK,SAAS,EAAI,mCAAmC;oBACvE,~~aAAa,GAAG,CAAC,CAAC,~~MAAM,~~CAAC,~~OAAO,~~CAAC~~;qBAC9B;oBACH~~,~~uBAAuB;oBACvB,IAAI,CAAC,CAAC,~~MAAM,CAAC,~~KAAK,KAAK,SAAS,IAAI,~~OAAO,CAAC~~,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS~~;~~wBACrE~~,~~aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;iBAClC;gBAED,~~IAAI,CAAC,QAAQ,CAAC;oBACZ,aAAa;iBACd,EAAE,~~KAAK~~,~~IAAI,~~EAAE;~~oBACZ~~,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;wBACpD,MAAM,aAAa,GAAG,~~MAAM,~~IAAI,CAAC,~~gBAAgB~~,EAAE,CAAC;~~wBACpD~~,uBAAuB;wBACvB,IAAI,aAAa,KAAK,SAAS,EAAE;4BAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;yBAC7F;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;IA4DJ,CAAC;~~IA/GQ~~,KAAK,CAAC,gBAAgB;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,aAAwC,CAAC;QAE7C,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,SAAS,EAAE;YACxE,aAAa,GAAG;gBACd,WAAW,EAAE,oCAAmB,CAAC,SAAS;gBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;gBAC/B,YAAY,EAAE,EAAE;aACjB,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IACpC,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IAC/D,CAAC;~~IA+BD~~,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC~~,CAAC,8DAA8D~~;~~IAC1F~~,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE;YAC1D,IAAI,CAAC,iBAAiB,EAAE,CAAC~~,CAAC,8DAA8D~~;~~SACzF~~;IACH,CAAC;IAEO,~~KAAK,CAAC,~~iBAAiB;~~QAC7B~~,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,SAAS,EAAE;YACxF,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YAClD,aAAa,GAAG,cAAyB,CAAC;SAC3C;QAED,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,UAAU;YAC7C,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;QAEzC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU;YACjB,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;IACjD,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,2BAA2B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1G,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QACzC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QAE3C,OAAO,CACL,oBAAC,wBAAQ,IACP,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,QAAQ,EAAE,UAAU,iBACR,4BAA4B,GAC/B,CACZ,CAAC;IACJ,CAAC;CACF;~~AAzHD~~,~~sCAyHC~~;AAED;;;GAGG;AACH,MAAa,qBAAsB,SAAQ,0CAAkB;IAC3D,uBAAuB;IACvB,IAAoB,oBAAoB;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAW,SAAS;QAClB,OAAO,oBAAC,aAAa,OAAG,CAAC;IAC3B,CAAC;CACF;AATD,sDASC;AAED,6CAAqB,CAAC,cAAc,CAAC,kCAAiB,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC;AACpF,6CAAqB,CAAC,cAAc,CAAC,kCAAiB,CAAC,OAAO,EAAE,qBAAqB,CAAC,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 PropertyEditors\r\n /\r\n\r\nimport \"./BooleanEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** @internal /\r\ninterface BooleanEditorState {\r\n checkboxValue: boolean;\r\n isDisabled?: boolean;\r\n}\r\n\r\n/* BooleanEditor React component that is a property editor with checkbox input\r\n * @public\r\n /\r\nexport class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {\r\n private _isMounted = false;\r\n private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n /* @internal /\r\n public override readonly state: Readonly<BooleanEditorState> = {\r\n checkboxValue: false,\r\n isDisabled: false,\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.checkboxValue,\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._inputElement.current;\r\n }\r\n\r\n public get hasFocus(): boolean {\r\n return document.activeElement === this._inputElement.current;\r\n }\r\n\r\n private _updateCheckboxValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n // istanbul ignore else\r\n if (this._isMounted) {\r\n ~~let~~ checkboxValue: ~~boolean~~ = ~~false;\r\n\r\n // istanbul ignore if\r\n if (~~e.target.checked ~~!== undefined) // Needed for unit test environment\r\n checkboxValue = e.target.checked~~;\r\n ~~else {~~\r\n ~~// istanbul ignore else\r\n if (e.target.value !== undefined && typeof e.target.value === \"boolean\")\r\n checkboxValue = e.target.value;\r\n~~ ~~}\r\n\r\n~~ this.setState({\r\n checkboxValue,\r\n }, ~~async~~ () => {\r\n // istanbul ignore else\r\n if (this.props.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: this.props.propertyRecord, newValue: propertyValue });\r\n }\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 { propertyRecord } = this.props;\r\n let checkboxValue = false;\r\n let isDisabled = false;\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const primitiveValue = propertyRecord.value.value;\r\n checkboxValue = primitiveValue as boolean;\r\n }\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.isDisabled)\r\n isDisabled = propertyRecord.isDisabled;\r\n\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState({ checkboxValue, isDisabled });\r\n }\r\n\r\n /* @internal /\r\n public override render() {\r\n const className = classnames(\"components-cell-editor\", \"components-boolean-editor\", this.props.className);\r\n const checked = this.state.checkboxValue;\r\n const isDisabled = !!this.state.isDisabled;\r\n\r\n return (\r\n <Checkbox\r\n ref={this._inputElement}\r\n onBlur={this.props.onBlur}\r\n className={className}\r\n style={this.props.style}\r\n checked={checked}\r\n onChange={this._updateCheckboxValue}\r\n setFocus={this.props.setFocus}\r\n disabled={isDisabled}\r\n data-testid=\"components-checkbox-editor\">\r\n </Checkbox>\r\n );\r\n }\r\n}\r\n\r\n/* Boolean Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[BooleanEditor]] React component.\r\n * @public\r\n */\r\nexport class BooleanPropertyEditor extends PropertyEditorBase {\r\n // istanbul ignore next\r\n public override get containerHandlesBlur(): boolean {\r\n return false;\r\n }\r\n\r\n public get reactNode(): React.ReactNode {\r\n return <BooleanEditor />;\r\n }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);\r\n"]}
1	+ {"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.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 \"./BooleanEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** @internal /\r\ninterface BooleanEditorState {\r\n checkboxValue: boolean;\r\n isDisabled?: boolean;\r\n}\r\n\r\n/* BooleanEditor React component that is a property editor with checkbox input\r\n * @public\r\n /\r\nexport class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {\r\n private _isMounted = false;\r\n private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n /* @internal /\r\n public override readonly state: Readonly<BooleanEditorState> = {\r\n checkboxValue: false,\r\n isDisabled: false,\r\n };\r\n\r\n public async getPropertyValue(): Promise<PropertyValue \| undefined> {\r\n return this.getPropertyValueSync();\r\n }\r\n\r\n private getPropertyValueSync(): 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.checkboxValue,\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._inputElement.current;\r\n }\r\n\r\n public get hasFocus(): boolean {\r\n return document.activeElement === this._inputElement.current;\r\n }\r\n\r\n private _updateCheckboxValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n // istanbul ignore else\r\n if (this._isMounted) {\r\n const checkboxValue = !!e.target.checked;\r\n\r\n this.setState({\r\n checkboxValue,\r\n }, () => {\r\n // istanbul ignore else\r\n if (this.props.propertyRecord && this.props.onCommit) {\r\n const propertyValue = this.getPropertyValueSync();\r\n // istanbul ignore else\r\n if (propertyValue !== undefined) {\r\n this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n }\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();\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();\r\n }\r\n }\r\n\r\n private setStateFromProps() {\r\n const { propertyRecord } = this.props;\r\n let checkboxValue = false;\r\n let isDisabled = false;\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const primitiveValue = propertyRecord.value.value;\r\n checkboxValue = primitiveValue as boolean;\r\n }\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.isDisabled)\r\n isDisabled = propertyRecord.isDisabled;\r\n\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState({ checkboxValue, isDisabled });\r\n }\r\n\r\n /* @internal /\r\n public override render() {\r\n const className = classnames(\"components-cell-editor\", \"components-boolean-editor\", this.props.className);\r\n const checked = this.state.checkboxValue;\r\n const isDisabled = !!this.state.isDisabled;\r\n\r\n return (\r\n <Checkbox\r\n ref={this._inputElement}\r\n onBlur={this.props.onBlur}\r\n className={className}\r\n style={this.props.style}\r\n checked={checked}\r\n onChange={this._updateCheckboxValue}\r\n setFocus={this.props.setFocus}\r\n disabled={isDisabled}\r\n data-testid=\"components-checkbox-editor\">\r\n </Checkbox>\r\n );\r\n }\r\n}\r\n\r\n/* Boolean Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[BooleanEditor]] React component.\r\n * @public\r\n */\r\nexport class BooleanPropertyEditor extends PropertyEditorBase {\r\n // istanbul ignore next\r\n public override get containerHandlesBlur(): boolean {\r\n return false;\r\n }\r\n\r\n public get reactNode(): React.ReactNode {\r\n return <BooleanEditor />;\r\n }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);\r\n"]}

package/lib/cjs/components-react/editors/BooleanEditor.scss CHANGED Viewed

@@ -2,23 +2,21 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/space";
-@import "~@itwin/itwinui-css/scss/style/typography";
-$checkbox-size: $iui-font-size * 1.2;
+$checkbox-size: calc(var(--iui-font-size-1) * 1.2);
 .components-boolean-editor {
-  height:      $checkbox-size;
-  width:       $checkbox-size;
+  height: $checkbox-size;
+  width: $checkbox-size;
   margin-left: 0px;
   &.components-cell-editor {
-    border:      none;
+    border: none;
   }
 }
 .components-property-list--horizontal {
   .components-boolean-editor {
-    margin-left:        $iui-s;    // Clear the resizer in the PropertyGrid
+    margin-left: var(--iui-size-xs); // Clear the resizer in the PropertyGrid
   }
 }

package/lib/cjs/components-react/editors/EditorContainer.d.ts CHANGED Viewed

@@ -55,7 +55,7 @@ export interface TypeEditor {
     hasFocus: boolean;
 }
 /**
- * EditorContainer React component used by the Table, Tree and PropertyGrid for cell editing.
+ * EditorContainer React component used by the Tree and PropertyGrid for cell editing.
  * @public
  */
 export declare class EditorContainer extends React.PureComponent<EditorContainerProps> {

package/lib/cjs/components-react/editors/EditorContainer.js CHANGED Viewed

@@ -32,7 +32,7 @@ const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const PropertyEditorManager_1 = require("./PropertyEditorManager");
 /**
- * EditorContainer React component used by the Table, Tree and PropertyGrid for cell editing.
+ * EditorContainer React component used by the Tree and PropertyGrid for cell editing.
  * @public
  */
 class EditorContainer extends React.PureComponent {

package/lib/cjs/components-react/editors/EditorContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorContainer.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EditorContainer.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 \"./EditorContainer.scss\";\r\nimport as React from \"react\";\r\nimport { PropertyRecord, PropertyValue, SpecialKey, UiAdmin } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { AsyncErrorMessage, PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** Arguments for the Property Updated event callback\r\n * @public\r\n /\r\nexport interface PropertyUpdatedArgs {\r\n /* The property being updated. /\r\n propertyRecord: PropertyRecord;\r\n /* The new value for the property. /\r\n newValue: PropertyValue;\r\n}\r\n\r\n/* Properties for a property editor component\r\n * @public\r\n /\r\nexport interface PropertyEditorProps extends CommonProps {\r\n /* The property being updated. /\r\n propertyRecord?: PropertyRecord;\r\n /* Handler for commit /\r\n onCommit?: (args: PropertyUpdatedArgs) => void;\r\n /* Handler for cancel /\r\n onCancel?: () => void;\r\n /* Handler for blur /\r\n onBlur?: (event: React.FocusEvent) => void;\r\n /* Indicates whether the Property Editor should set focus /\r\n setFocus?: boolean;\r\n}\r\n\r\n/* [[EditorContainer]] React component properties\r\n * @public\r\n /\r\nexport interface EditorContainerProps extends CommonProps {\r\n /* The property being updated. /\r\n propertyRecord: PropertyRecord;\r\n /* Tooltip text /\r\n title?: string;\r\n /* Handler for commit /\r\n onCommit: (args: PropertyUpdatedArgs) => void;\r\n /* Handler for cancel /\r\n onCancel: () => void;\r\n /* Indicates whether the Property Editor should set focus /\r\n setFocus?: boolean;\r\n\r\n /* @internal /\r\n ignoreEditorBlur?: boolean;\r\n}\r\n\r\n/* @internal /\r\ninterface CloneProps extends PropertyEditorProps {\r\n ref: (ref: any) => void;\r\n}\r\n\r\n/* Interface implemented by React based type editors\r\n * @public\r\n /\r\nexport interface TypeEditor {\r\n getPropertyValue: () => Promise<PropertyValue \| undefined>;\r\n htmlElement: HTMLElement \| null;\r\n hasFocus: boolean;\r\n}\r\n\r\n/\r\n EditorContainer React component used by the Table, Tree and PropertyGrid for cell editing.\r\n * @public\r\n /\r\nexport class EditorContainer extends React.PureComponent<EditorContainerProps> {\r\n\r\n private _editorRef: TypeEditor \| undefined;\r\n private _propertyEditor: PropertyEditorBase \| undefined;\r\n\r\n private createEditor(): React.ReactNode {\r\n const editorRef = (ref: TypeEditor \| undefined) => this._editorRef = ref;\r\n\r\n const editorProps: CloneProps = {\r\n ref: editorRef,\r\n onCommit: this._handleEditorCommit,\r\n onCancel: this._handleEditorCancel,\r\n onBlur: this._handleEditorBlur,\r\n propertyRecord: this.props.propertyRecord,\r\n setFocus: this.props.setFocus !== undefined ? this.props.setFocus : true,\r\n className: this.props.className,\r\n style: this.props.style,\r\n };\r\n\r\n const propDescription = this.props.propertyRecord.property;\r\n\r\n const editorName = propDescription.editor !== undefined ? propDescription.editor.name : undefined;\r\n this._propertyEditor = PropertyEditorManager.createEditor(propDescription.typename, editorName, propDescription.dataController);\r\n const editorNode: React.ReactNode = this._propertyEditor.reactNode;\r\n\r\n let clonedNode: React.ReactNode = null;\r\n // istanbul ignore else\r\n if (React.isValidElement(editorNode)) {\r\n clonedNode = React.cloneElement(editorNode, editorProps);\r\n }\r\n\r\n return clonedNode;\r\n }\r\n\r\n private _handleEditorBlur = (_e: React.FocusEvent) => {\r\n // istanbul ignore else\r\n if (!this.props.ignoreEditorBlur && this._propertyEditor && this._propertyEditor.containerHandlesBlur)\r\n this._handleContainerCommit(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n };\r\n\r\n private _handleContainerBlur = (e: React.FocusEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _handleClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _handleKeyDown = (e: React.KeyboardEvent) => {\r\n switch (e.key) {\r\n case SpecialKey.Escape:\r\n this.onPressEscape(e);\r\n break;\r\n case SpecialKey.Enter:\r\n this.onPressEnter(e);\r\n break;\r\n case SpecialKey.Tab:\r\n this.onPressTab(e);\r\n break;\r\n default:\r\n if (this._propertyEditor && this._propertyEditor.containerStopsKeydownPropagation)\r\n e.stopPropagation();\r\n }\r\n };\r\n\r\n private _handleRightClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private onPressEscape(_e: React.KeyboardEvent): void {\r\n // istanbul ignore else\r\n if (this._propertyEditor && this._propertyEditor.containerHandlesEscape) {\r\n this._commitCancel();\r\n }\r\n }\r\n\r\n private onPressEnter(e: React.KeyboardEvent): void {\r\n // istanbul ignore else\r\n if (this._propertyEditor && this._propertyEditor.containerHandlesEnter) {\r\n // istanbul ignore else\r\n if (this._editorRef && this._editorRef.hasFocus)\r\n e.stopPropagation();\r\n this._handleContainerCommit(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n }\r\n\r\n private onPressTab(e: React.KeyboardEvent): void {\r\n // istanbul ignore else\r\n if (this._propertyEditor && this._propertyEditor.containerHandlesTab) {\r\n e.stopPropagation();\r\n this._handleContainerCommit(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n }\r\n\r\n private displayOutputMessage(errorMessage: AsyncErrorMessage \| undefined) {\r\n // istanbul ignore else\r\n if (errorMessage && this._editorRef) {\r\n const htmlElement = this._editorRef && this._editorRef.htmlElement;\r\n // istanbul ignore else\r\n if (htmlElement)\r\n UiAdmin.messagePresenter.displayInputFieldMessage(htmlElement, errorMessage.severity, errorMessage.briefMessage, errorMessage.detailedMessage);\r\n else\r\n UiAdmin.messagePresenter.displayMessage(errorMessage.severity, errorMessage.briefMessage, errorMessage.detailedMessage, errorMessage.messageType);\r\n }\r\n }\r\n\r\n private async isNewValueValid(value: PropertyValue): Promise<boolean> {\r\n let isValid = true;\r\n\r\n // istanbul ignore else\r\n if (this._propertyEditor && this.props.propertyRecord) {\r\n const validateResult = await this._propertyEditor.validateValue(value, this.props.propertyRecord);\r\n\r\n if (validateResult.encounteredError) {\r\n this.displayOutputMessage(validateResult.errorMessage);\r\n isValid = false;\r\n }\r\n } else {\r\n isValid = false;\r\n }\r\n\r\n return isValid;\r\n }\r\n\r\n private _handleEditorCommit = (args: PropertyUpdatedArgs): void => {\r\n this._commit(args); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n };\r\n\r\n private _handleContainerCommit = async (): Promise<void> => {\r\n const newValue = this._editorRef && await this._editorRef.getPropertyValue();\r\n // istanbul ignore else\r\n if (newValue !== undefined) {\r\n this._commit({ propertyRecord: this.props.propertyRecord, newValue }); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n };\r\n\r\n private _commit = async (args: PropertyUpdatedArgs) => {\r\n const newValue = args.newValue;\r\n const isValid = await this.isNewValueValid(newValue);\r\n if (isValid) {\r\n let doCommit = true;\r\n // istanbul ignore else\r\n if (this._propertyEditor && args.propertyRecord) {\r\n const commitResult = await this._propertyEditor.commitValue(newValue, args.propertyRecord);\r\n if (commitResult.encounteredError) {\r\n this.displayOutputMessage(commitResult.errorMessage);\r\n doCommit = false;\r\n }\r\n }\r\n\r\n if (doCommit) {\r\n this.props.onCommit(args);\r\n }\r\n }\r\n };\r\n\r\n private _handleEditorCancel = () => {\r\n this._commitCancel();\r\n };\r\n\r\n private _commitCancel = () => {\r\n this.props.onCancel();\r\n };\r\n\r\n /* @internal */\r\n public override render() {\r\n return (\r\n <span className=\"components-editor-container\"\r\n onBlur={this._handleContainerBlur}\r\n onKeyDown={this._handleKeyDown}\r\n onClick={this._handleClick}\r\n onContextMenu={this._handleRightClick}\r\n title={this.props.title}\r\n data-testid=\"editor-container\"\r\n role=\"presentation\"\r\n >\r\n {this.createEditor()}\r\n </span>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"EditorContainer.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EditorContainer.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 \"./EditorContainer.scss\";\r\nimport as React from \"react\";\r\nimport { PropertyRecord, PropertyValue, SpecialKey, UiAdmin } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { AsyncErrorMessage, PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** Arguments for the Property Updated event callback\r\n * @public\r\n /\r\nexport interface PropertyUpdatedArgs {\r\n /* The property being updated. /\r\n propertyRecord: PropertyRecord;\r\n /* The new value for the property. /\r\n newValue: PropertyValue;\r\n}\r\n\r\n/* Properties for a property editor component\r\n * @public\r\n /\r\nexport interface PropertyEditorProps extends CommonProps {\r\n /* The property being updated. /\r\n propertyRecord?: PropertyRecord;\r\n /* Handler for commit /\r\n onCommit?: (args: PropertyUpdatedArgs) => void;\r\n /* Handler for cancel /\r\n onCancel?: () => void;\r\n /* Handler for blur /\r\n onBlur?: (event: React.FocusEvent) => void;\r\n /* Indicates whether the Property Editor should set focus /\r\n setFocus?: boolean;\r\n}\r\n\r\n/* [[EditorContainer]] React component properties\r\n * @public\r\n /\r\nexport interface EditorContainerProps extends CommonProps {\r\n /* The property being updated. /\r\n propertyRecord: PropertyRecord;\r\n /* Tooltip text /\r\n title?: string;\r\n /* Handler for commit /\r\n onCommit: (args: PropertyUpdatedArgs) => void;\r\n /* Handler for cancel /\r\n onCancel: () => void;\r\n /* Indicates whether the Property Editor should set focus /\r\n setFocus?: boolean;\r\n\r\n /* @internal /\r\n ignoreEditorBlur?: boolean;\r\n}\r\n\r\n/* @internal /\r\ninterface CloneProps extends PropertyEditorProps {\r\n ref: (ref: any) => void;\r\n}\r\n\r\n/* Interface implemented by React based type editors\r\n * @public\r\n /\r\nexport interface TypeEditor {\r\n getPropertyValue: () => Promise<PropertyValue \| undefined>;\r\n htmlElement: HTMLElement \| null;\r\n hasFocus: boolean;\r\n}\r\n\r\n/\r\n EditorContainer React component used by the Tree and PropertyGrid for cell editing.\r\n * @public\r\n /\r\nexport class EditorContainer extends React.PureComponent<EditorContainerProps> {\r\n\r\n private _editorRef: TypeEditor \| undefined;\r\n private _propertyEditor: PropertyEditorBase \| undefined;\r\n\r\n private createEditor(): React.ReactNode {\r\n const editorRef = (ref: TypeEditor \| undefined) => this._editorRef = ref;\r\n\r\n const editorProps: CloneProps = {\r\n ref: editorRef,\r\n onCommit: this._handleEditorCommit,\r\n onCancel: this._handleEditorCancel,\r\n onBlur: this._handleEditorBlur,\r\n propertyRecord: this.props.propertyRecord,\r\n setFocus: this.props.setFocus !== undefined ? this.props.setFocus : true,\r\n className: this.props.className,\r\n style: this.props.style,\r\n };\r\n\r\n const propDescription = this.props.propertyRecord.property;\r\n\r\n const editorName = propDescription.editor !== undefined ? propDescription.editor.name : undefined;\r\n this._propertyEditor = PropertyEditorManager.createEditor(propDescription.typename, editorName, propDescription.dataController);\r\n const editorNode: React.ReactNode = this._propertyEditor.reactNode;\r\n\r\n let clonedNode: React.ReactNode = null;\r\n // istanbul ignore else\r\n if (React.isValidElement(editorNode)) {\r\n clonedNode = React.cloneElement(editorNode, editorProps);\r\n }\r\n\r\n return clonedNode;\r\n }\r\n\r\n private _handleEditorBlur = (_e: React.FocusEvent) => {\r\n // istanbul ignore else\r\n if (!this.props.ignoreEditorBlur && this._propertyEditor && this._propertyEditor.containerHandlesBlur)\r\n this._handleContainerCommit(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n };\r\n\r\n private _handleContainerBlur = (e: React.FocusEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _handleClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _handleKeyDown = (e: React.KeyboardEvent) => {\r\n switch (e.key) {\r\n case SpecialKey.Escape:\r\n this.onPressEscape(e);\r\n break;\r\n case SpecialKey.Enter:\r\n this.onPressEnter(e);\r\n break;\r\n case SpecialKey.Tab:\r\n this.onPressTab(e);\r\n break;\r\n default:\r\n if (this._propertyEditor && this._propertyEditor.containerStopsKeydownPropagation)\r\n e.stopPropagation();\r\n }\r\n };\r\n\r\n private _handleRightClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private onPressEscape(_e: React.KeyboardEvent): void {\r\n // istanbul ignore else\r\n if (this._propertyEditor && this._propertyEditor.containerHandlesEscape) {\r\n this._commitCancel();\r\n }\r\n }\r\n\r\n private onPressEnter(e: React.KeyboardEvent): void {\r\n // istanbul ignore else\r\n if (this._propertyEditor && this._propertyEditor.containerHandlesEnter) {\r\n // istanbul ignore else\r\n if (this._editorRef && this._editorRef.hasFocus)\r\n e.stopPropagation();\r\n this._handleContainerCommit(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n }\r\n\r\n private onPressTab(e: React.KeyboardEvent): void {\r\n // istanbul ignore else\r\n if (this._propertyEditor && this._propertyEditor.containerHandlesTab) {\r\n e.stopPropagation();\r\n this._handleContainerCommit(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n }\r\n\r\n private displayOutputMessage(errorMessage: AsyncErrorMessage \| undefined) {\r\n // istanbul ignore else\r\n if (errorMessage && this._editorRef) {\r\n const htmlElement = this._editorRef && this._editorRef.htmlElement;\r\n // istanbul ignore else\r\n if (htmlElement)\r\n UiAdmin.messagePresenter.displayInputFieldMessage(htmlElement, errorMessage.severity, errorMessage.briefMessage, errorMessage.detailedMessage);\r\n else\r\n UiAdmin.messagePresenter.displayMessage(errorMessage.severity, errorMessage.briefMessage, errorMessage.detailedMessage, errorMessage.messageType);\r\n }\r\n }\r\n\r\n private async isNewValueValid(value: PropertyValue): Promise<boolean> {\r\n let isValid = true;\r\n\r\n // istanbul ignore else\r\n if (this._propertyEditor && this.props.propertyRecord) {\r\n const validateResult = await this._propertyEditor.validateValue(value, this.props.propertyRecord);\r\n\r\n if (validateResult.encounteredError) {\r\n this.displayOutputMessage(validateResult.errorMessage);\r\n isValid = false;\r\n }\r\n } else {\r\n isValid = false;\r\n }\r\n\r\n return isValid;\r\n }\r\n\r\n private _handleEditorCommit = (args: PropertyUpdatedArgs): void => {\r\n this._commit(args); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n };\r\n\r\n private _handleContainerCommit = async (): Promise<void> => {\r\n const newValue = this._editorRef && await this._editorRef.getPropertyValue();\r\n // istanbul ignore else\r\n if (newValue !== undefined) {\r\n this._commit({ propertyRecord: this.props.propertyRecord, newValue }); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n };\r\n\r\n private _commit = async (args: PropertyUpdatedArgs) => {\r\n const newValue = args.newValue;\r\n const isValid = await this.isNewValueValid(newValue);\r\n if (isValid) {\r\n let doCommit = true;\r\n // istanbul ignore else\r\n if (this._propertyEditor && args.propertyRecord) {\r\n const commitResult = await this._propertyEditor.commitValue(newValue, args.propertyRecord);\r\n if (commitResult.encounteredError) {\r\n this.displayOutputMessage(commitResult.errorMessage);\r\n doCommit = false;\r\n }\r\n }\r\n\r\n if (doCommit) {\r\n this.props.onCommit(args);\r\n }\r\n }\r\n };\r\n\r\n private _handleEditorCancel = () => {\r\n this._commitCancel();\r\n };\r\n\r\n private _commitCancel = () => {\r\n this.props.onCancel();\r\n };\r\n\r\n /* @internal */\r\n public override render() {\r\n return (\r\n <span className=\"components-editor-container\"\r\n onBlur={this._handleContainerBlur}\r\n onKeyDown={this._handleKeyDown}\r\n onClick={this._handleClick}\r\n onContextMenu={this._handleRightClick}\r\n title={this.props.title}\r\n data-testid=\"editor-container\"\r\n role=\"presentation\"\r\n >\r\n {this.createEditor()}\r\n </span>\r\n );\r\n }\r\n}\r\n"]}

package/lib/cjs/components-react/editors/EnumButtonGroupEditor.scss CHANGED Viewed

@@ -3,7 +3,6 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 $desktop-tool-stripe-width: 2px;
 $desktop-tool-stripe-height: 22px;
@@ -25,14 +24,14 @@ $components-enumbuttongroup-editor-item-border-width: 1px;
 $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
 .components-enumbuttongroup-editor {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
   background: $buic-background-control;
   width: fit-content;
   $divider-color: $buic-background-toolbutton-stroke;
   $border-color: $buic-background-toolbutton-stroke;
-  $border-radius: 3px;
+  $border-radius: var(--iui-border-radius-1);
   border-color: $border-color;
   border-width: $components-enumbuttongroup-editor-item-border-width;
@@ -45,7 +44,7 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
   height: $components-enumbuttongroup-editor-item-height;
-  >* {
+  > * {
     display: inline-block;
     height: 100%;
     width: $components-enumbuttongroup-editor-item-width;
@@ -54,7 +53,7 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
       margin-left: $components-enumbuttongroup-editor-space-between-toolbar-items;
       &:before {
-        content: '';
+        content: "";
         background-color: $divider-color;
         display: block;
         position: absolute;
@@ -66,7 +65,6 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
       }
     }
   }
 }
 .components-enumbuttongroup-button {
@@ -81,12 +79,11 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
   transition-timing-function: ease;
   position: relative;
   background: $buic-background-control
-    /* linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2) */
-  ;
+    /* linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2) */;
   height: $components-enumbuttongroup-editor-item-height;
   width: $components-enumbuttongroup-editor-item-width;
-  >i {
+  > i {
     font-size: $icon-size;
     width: 100%;
     height: 100%;
@@ -109,14 +106,14 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
   }
   &:hover {
-    >i {
+    > i {
       color: $hovered-icon-color;
       transition-duration: 150ms;
     }
   }
   &:active {
-    >i {
+    > i {
       color: $pressed-icon-color;
       filter: $no-shadow;
@@ -139,7 +136,7 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
     &:not(:active):not(.nz-is-disabled) {
       transition-duration: 0s;
-      >i {
+      > i {
         color: $buic-foreground-primary;
         filter: $no-shadow;
         transition-duration: 150ms;
@@ -151,12 +148,15 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
       }
       &:after {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         background: $buic-foreground-primary;
         left: 3px;
-        top: ($components-enumbuttongroup-editor-item-height - $desktop-tool-stripe-height) * .5;
+        top: (
+            $components-enumbuttongroup-editor-item-height -
+              $desktop-tool-stripe-height
+          ) * 0.5;
         border-radius: 2px;
         width: $desktop-tool-stripe-width;
         height: $desktop-tool-stripe-height;
@@ -167,7 +167,7 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
   &.nz-is-disabled {
     pointer-events: none;
-    >i {
+    > i {
       color: $disabled-icon-color;
     }
@@ -179,5 +179,4 @@ $components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
       pointer-events: none;
     }
   }
-}
+}

package/lib/cjs/components-react/editors/IconEditor.scss CHANGED Viewed

@@ -3,15 +3,14 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 $components-color-editor-item-height: 100%;
 .components-icon-editor {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
+  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-color-editor-item-height;
-}
+}

package/lib/cjs/components-react/editors/ImageCheckBoxEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageCheckBoxEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/ImageCheckBoxEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACgE,aAAa,EACnF,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAKpF,gBAAgB;AAChB,UAAU,wBAAwB;IAChC,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,wBAAwB,CAAE,YAAW,UAAU;IAC/H,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAwD;IAE7E,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,CAKhE;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,YAAY,CAalB;IAEc,MAAM;~~CAoBvB~~;AAED;;;GAGG;AACH,qBAAa,2BAA4B,SAAQ,kBAAkB;IACjE,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
1	+ {"version":3,"file":"ImageCheckBoxEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/ImageCheckBoxEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACgE,aAAa,EACnF,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAKpF,gBAAgB;AAChB,UAAU,wBAAwB;IAChC,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,wBAAwB,CAAE,YAAW,UAAU;IAC/H,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAwD;IAE7E,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,CAKhE;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,YAAY,CAalB;IAEc,MAAM;CAmBvB;AAED;;;GAGG;AACH,qBAAa,2BAA4B,SAAQ,kBAAkB;IACjE,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

package/lib/cjs/components-react/editors/ImageCheckBoxEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageCheckBoxEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ImageCheckBoxEditor.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,sCAAoC;AACpC,4DAAoC;AACpC,6CAA+B;AAC/B,0DAE+B;AAE/B,mEAAoF;AACpF,kDAAkD;AAalD;;;GAGG;AACH,MAAa,mBAAoB,SAAQ,KAAK,CAAC,aAA4D;IAA3G;;QACU,eAAU,GAAG,KAAK,CAAC;QACnB,kBAAa,GAAsC,KAAK,CAAC,SAAS,EAAE,CAAC;QAE7E,gBAAgB;QACS,UAAK,GAAuC;YACnE,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;YACX,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,KAAK;SAClB,CAAC;QAwEM,iBAAY,GAAG,CAAC,OAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,QAAQ,CAAC;gBACZ,aAAa,EAAE,OAAO;aACvB,EAAE,KAAK,IAAI,EAAE;gBACZ,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACpD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACpD,uBAAuB;oBACvB,IAAI,IAAI,CAAC,UAAU,IAAI,aAAa,KAAK,SAAS,EAAE;wBAClD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;qBAC7F;iBACF;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;~~IAsBJ~~,CAAC;~~IAzGQ~~,KAAK,CAAC,gBAAgB;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,aAAwC,CAAC;QAE7C,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,SAAS,EAAE;YACxE,aAAa,GAAG;gBACd,WAAW,EAAE,oCAAmB,CAAC,SAAS;gBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;gBAC/B,YAAY,EAAE,EAAE;aACjB,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IACpC,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IAC/D,CAAC;IAED,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE;YAC1D,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAEO,iBAAiB;QACvB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,IAAI,OAAO,GAAG,EAAE,CAAC;QACjB,IAAI,QAAQ,GAAG,EAAE,CAAC;QAClB,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,SAAS,EAAE;YACxF,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YAClD,aAAa,GAAG,cAAyB,CAAC;SAC3C;QAED,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,UAAU;YAC7C,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;QAEzC,IAAI,cAAc,IAAI,cAAc,CAAC,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,MAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;YACxH,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAA2B,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,yCAAwB,CAAC,cAAc,CAAwB,CAAC;YACvL,uBAAuB;YACvB,IAAI,mBAAmB,EAAE;gBACvB,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC;gBACtC,QAAQ,GAAG,mBAAmB,CAAC,QAAQ,CAAC;aACzC;SACF;QACD,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;IAClE,CAAC;IAiBe,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAChH,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QACzC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QAE3C,OAAO,CACL,oBAAC,0BAAa,IACZ,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,iBACd,iCAAiC,~~GAC/B~~,~~CACjB~~,CAAC;IACJ,CAAC;CACF;~~AArHD~~,~~kDAqHC~~;AAED;;;GAGG;AACH,MAAa,2BAA4B,SAAQ,0CAAkB;IACjE,IAAW,SAAS;QAClB,OAAO,oBAAC,mBAAmB,OAAG,CAAC;IACjC,CAAC;CACF;AAJD,kEAIC;AAED,6CAAqB,CAAC,cAAc,CAAC,kCAAiB,CAAC,OAAO,EAAE,2BAA2B,EAAE,oCAAmB,CAAC,aAAa,CAAC,CAAC;AAChI,6CAAqB,CAAC,cAAc,CAAC,kCAAiB,CAAC,IAAI,EAAE,2BAA2B,EAAE,oCAAmB,CAAC,aAAa,CAAC,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 PropertyEditors\r\n /\r\n\r\nimport \"./ImageCheckBoxEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport {\r\n ImageCheckBoxParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { ImageCheckBox } from \"@itwin/core-react\";\r\n\r\n// cSpell:ignore imagecheckbox\r\n\r\n/** @internal /\r\ninterface ImageCheckBoxEditorState {\r\n /* Image for the \"checked\" state /\r\n imageOn: string;\r\n /* Image for the \"unchecked\" (default) state /\r\n imageOff: string;\r\n checkboxValue: boolean;\r\n isDisabled?: boolean;\r\n}\r\n/* [[ImageCheckBoxEditor]]\r\n * Boolean editor that renders with an image instead of checkbox\r\n * @public\r\n /\r\nexport class ImageCheckBoxEditor extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState> implements TypeEditor {\r\n private _isMounted = false;\r\n private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\r\n\r\n /* @internal /\r\n public override readonly state: Readonly<ImageCheckBoxEditorState> = {\r\n imageOff: \"\",\r\n imageOn: \"\",\r\n checkboxValue: false,\r\n isDisabled: false,\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.checkboxValue,\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._inputElement.current;\r\n }\r\n\r\n public get hasFocus(): boolean {\r\n return document.activeElement === this._inputElement.current;\r\n }\r\n\r\n /* @internal /\r\n public override componentDidMount() {\r\n this._isMounted = true;\r\n this.setStateFromProps();\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();\r\n }\r\n }\r\n\r\n private setStateFromProps() {\r\n const { propertyRecord } = this.props;\r\n let checkboxValue = false;\r\n let imageOn = \"\";\r\n let imageOff = \"\";\r\n let isDisabled = false;\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const primitiveValue = propertyRecord.value.value;\r\n checkboxValue = primitiveValue as boolean;\r\n }\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.isDisabled)\r\n isDisabled = propertyRecord.isDisabled;\r\n\r\n if (propertyRecord && propertyRecord.property && propertyRecord.property.editor && propertyRecord.property.editor.params) {\r\n const imageCheckBoxParams = propertyRecord.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.CheckBoxImages) as ImageCheckBoxParams;\r\n // istanbul ignore else\r\n if (imageCheckBoxParams) {\r\n imageOn = imageCheckBoxParams.imageOn;\r\n imageOff = imageCheckBoxParams.imageOff;\r\n }\r\n }\r\n this.setState({ imageOn, imageOff, checkboxValue, isDisabled });\r\n }\r\n\r\n private _handleClick = (checked: boolean) => {\r\n this.setState({\r\n checkboxValue: checked,\r\n }, async () => {\r\n // istanbul ignore else\r\n if (this.props.propertyRecord && this.props.onCommit) {\r\n const propertyValue = await this.getPropertyValue();\r\n // istanbul ignore else\r\n if (this._isMounted && propertyValue !== undefined) {\r\n this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n }\r\n }\r\n });\r\n };\r\n\r\n public override render() {\r\n const className = classnames(\"components-cell-editor\", \"components-imagecheckbox-editor\", this.props.className);\r\n const checked = this.state.checkboxValue;\r\n const isDisabled = !!this.state.isDisabled;\r\n\r\n return (\r\n <ImageCheckBox\r\n inputRef={this._inputElement}\r\n imageOff={this.state.imageOff}\r\n imageOn={this.state.imageOn}\r\n className={className}\r\n border={true}\r\n style={this.props.style}\r\n checked={checked}\r\n disabled={isDisabled}\r\n onClick={this._handleClick}\r\n data-testid=\"components-imagecheckbox-editor\">\r\n ~~</ImageCheckBox>\r\n~~ );\r\n }\r\n}\r\n\r\n/* ImageCheckBox Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[ImageCheckBoxEditor]] React component.\r\n * @public\r\n */\r\nexport class ImageCheckBoxPropertyEditor extends PropertyEditorBase {\r\n public get reactNode(): React.ReactNode {\r\n return <ImageCheckBoxEditor />;\r\n }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\r\n"]}
1	+ {"version":3,"file":"ImageCheckBoxEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ImageCheckBoxEditor.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 \"./ImageCheckBoxEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport {\r\n ImageCheckBoxParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { ImageCheckBox } from \"@itwin/core-react\";\r\n\r\n// cSpell:ignore imagecheckbox\r\n\r\n/** @internal /\r\ninterface ImageCheckBoxEditorState {\r\n /* Image for the \"checked\" state /\r\n imageOn: string;\r\n /* Image for the \"unchecked\" (default) state /\r\n imageOff: string;\r\n checkboxValue: boolean;\r\n isDisabled?: boolean;\r\n}\r\n/* [[ImageCheckBoxEditor]]\r\n * Boolean editor that renders with an image instead of checkbox\r\n * @public\r\n /\r\nexport class ImageCheckBoxEditor extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState> implements TypeEditor {\r\n private _isMounted = false;\r\n private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\r\n\r\n /* @internal /\r\n public override readonly state: Readonly<ImageCheckBoxEditorState> = {\r\n imageOff: \"\",\r\n imageOn: \"\",\r\n checkboxValue: false,\r\n isDisabled: false,\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.checkboxValue,\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._inputElement.current;\r\n }\r\n\r\n public get hasFocus(): boolean {\r\n return document.activeElement === this._inputElement.current;\r\n }\r\n\r\n /* @internal /\r\n public override componentDidMount() {\r\n this._isMounted = true;\r\n this.setStateFromProps();\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();\r\n }\r\n }\r\n\r\n private setStateFromProps() {\r\n const { propertyRecord } = this.props;\r\n let checkboxValue = false;\r\n let imageOn = \"\";\r\n let imageOff = \"\";\r\n let isDisabled = false;\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const primitiveValue = propertyRecord.value.value;\r\n checkboxValue = primitiveValue as boolean;\r\n }\r\n\r\n // istanbul ignore else\r\n if (propertyRecord && propertyRecord.isDisabled)\r\n isDisabled = propertyRecord.isDisabled;\r\n\r\n if (propertyRecord && propertyRecord.property && propertyRecord.property.editor && propertyRecord.property.editor.params) {\r\n const imageCheckBoxParams = propertyRecord.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.CheckBoxImages) as ImageCheckBoxParams;\r\n // istanbul ignore else\r\n if (imageCheckBoxParams) {\r\n imageOn = imageCheckBoxParams.imageOn;\r\n imageOff = imageCheckBoxParams.imageOff;\r\n }\r\n }\r\n this.setState({ imageOn, imageOff, checkboxValue, isDisabled });\r\n }\r\n\r\n private _handleClick = (checked: boolean) => {\r\n this.setState({\r\n checkboxValue: checked,\r\n }, async () => {\r\n // istanbul ignore else\r\n if (this.props.propertyRecord && this.props.onCommit) {\r\n const propertyValue = await this.getPropertyValue();\r\n // istanbul ignore else\r\n if (this._isMounted && propertyValue !== undefined) {\r\n this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n }\r\n }\r\n });\r\n };\r\n\r\n public override render() {\r\n const className = classnames(\"components-cell-editor\", \"components-imagecheckbox-editor\", this.props.className);\r\n const checked = this.state.checkboxValue;\r\n const isDisabled = !!this.state.isDisabled;\r\n\r\n return (\r\n <ImageCheckBox\r\n inputRef={this._inputElement}\r\n imageOff={this.state.imageOff}\r\n imageOn={this.state.imageOn}\r\n className={className}\r\n border={true}\r\n style={this.props.style}\r\n checked={checked}\r\n disabled={isDisabled}\r\n onClick={this._handleClick}\r\n data-testid=\"components-imagecheckbox-editor\"/>\r\n );\r\n }\r\n}\r\n\r\n/* ImageCheckBox Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[ImageCheckBoxEditor]] React component.\r\n * @public\r\n */\r\nexport class ImageCheckBoxPropertyEditor extends PropertyEditorBase {\r\n public get reactNode(): React.ReactNode {\r\n return <ImageCheckBoxEditor />;\r\n }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\r\n"]}

package/lib/cjs/components-react/editors/ImageCheckBoxEditor.scss CHANGED Viewed

@@ -2,22 +2,23 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/typography";
 $image-checkbox-size: 32px;
 .components-image-checkbox-editor {
-  height:      $image-checkbox-size;
-  width:       $image-checkbox-size;
+  height: $image-checkbox-size;
+  width: $image-checkbox-size;
   margin-left: 0px;
   &.components-cell-editor {
-    border:      none;
+    border: none;
   }
 }
 .components-property-list--horizontal {
   .components-image-checkbox-editor {
-    margin-left: $iui-font-size;    // Clear the resizer in the PropertyGrid
+    margin-left: var(
+      --iui-font-size-1
+    ); // Clear the resizer in the PropertyGrid
   }
 }

package/lib/cjs/components-react/editors/PopupButton.scss CHANGED Viewed

@@ -7,7 +7,6 @@
 @import "~@itwin/core-react/lib/cjs/core-react/style/baseline";
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/style/variables";
-@import "~@itwin/itwinui-css/scss/style/variables";
 .components-popup-button {
   min-width: 100%;
@@ -17,7 +16,7 @@
   padding: 0;
   background-color: $buic-background-control;
   border: 1px solid $buic-inputs-border;
-  border-radius: $iui-border-radius;
+  border-radius: var(--iui-border-radius-1);
   box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
   box-sizing: border-box;
   cursor: pointer;
@@ -28,9 +27,9 @@
   font-weight: normal;
-  >.components-popup-button-value {
+  > .components-popup-button-value {
     flex-grow: 1;
-    max-width: calc(100% - #{$uicore-line-height});
+    max-width: calc(100% - var(--iui-size-l));
     overflow-x: hidden;
     padding: 0 3px;
@@ -39,13 +38,13 @@
     }
   }
-  >.components-popup-button-arrow {
+  > .components-popup-button-arrow {
     background-color: $buic-background-control;
-    width: $uicore-line-height;
-    height: $uicore-line-height;
+    width: var(--iui-size-l);
+    height: var(--iui-size-l);
-    >.components-popup-button-arrow-icon {
-      transition: transform .2s;
+    > .components-popup-button-arrow-icon {
+      transition: transform 0.2s;
       &:hover {
         color: $buic-foreground-primary;
@@ -53,7 +52,7 @@
       text-align: center;
       font-size: $uicore-icons-x-small;
-      line-height: $uicore-line-height;
+      line-height: var(--iui-size-l);
     }
   }
@@ -63,17 +62,16 @@
     outline: 0px;
     box-shadow: $uicore-inputs-focus-boxshadow;
-    >.components-popup-button-arrow {
+    > .components-popup-button-arrow {
       border: none;
       box-shadow: none;
       outline: 0px;
-      >.components-popup-button-arrow-icon {
+      > .components-popup-button-arrow-icon {
         color: $buic-foreground-primary;
       }
     }
   }
 }
 .components-smallEditor-host {
@@ -95,14 +93,13 @@
   justify-content: flex-end;
   margin-top: 4px;
-  >.components-popup-large-button {
+  > .components-popup-large-button {
     width: 70px;
     font-size: 20px;
     margin-left: 6px;
   }
-  >.components-popup-cancel-button {
+  > .components-popup-cancel-button {
     &,
     &:active,
     &:focus {
@@ -115,6 +112,5 @@
       background-color: $uicore-gray-5;
       color: $uicore-white;
     }
   }
-}
+}

package/lib/cjs/components-react/editors/TextareaEditor.js CHANGED Viewed

@@ -169,7 +169,7 @@ class TextareaEditor extends React.PureComponent {
         };
         textareaProps["aria-label"] = this._ariaLabel;
         return (React.createElement("div", { className: className, ref: this._divElement },
-            React.createElement(PopupButton_1.PopupButton, { label: this.state.inputValue, closeOnEnter: false, setFocus: this.props.setFocus, focusTarget: ".uicore-inputs-textarea" },
+            React.createElement(PopupButton_1.PopupButton, { label: this.state.inputValue, closeOnEnter: false, setFocus: this.props.setFocus, focusTarget: ".iui-input" },
                 React.createElement(PopupButton_1.PopupContent, null,
                     React.createElement(itwinui_react_1.Textarea, { ...textareaProps, "data-testid": "components-textarea-editor" }),
                     React.createElement(PopupButton_1.PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));