@itwin/components-react 4.17.6 → 5.0.0-dev.3

package/lib/components-react/editors/EditorContainer.js

@@ -0,0 +1,204 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./EditorContainer.scss";
+import * as React from "react";
+import { Key } from "ts-key-enum";
+import { PropertyValueFormat, UiAdmin } from "@itwin/appui-abstract";
+import { PropertyEditorManager } from "./PropertyEditorManager.js";
+/** EditorContainer React component used by the Tree and PropertyGrid for cell editing.
+ * @public
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function EditorContainer(props) {
+    const { ignoreEditorBlur, title, shouldCommitOnChange, propertyRecord, setFocus, onCommit, onCancel, ...rest } = props;
+    const editorRef = React.useRef();
+    const propertyEditorRef = React.useRef();
+    const handleClick = (e) => e.stopPropagation();
+    const handleContainerBlur = (e) => e.stopPropagation();
+    const handleEditorCommit = (args) => void commit(args);
+    const handleContainerCommit = async () => {
+        const newValue = editorRef && (await editorRef.current?.getPropertyValue());
+        if (newValue === undefined)
+            return;
+        void commit({
+            propertyRecord,
+            newValue,
+        });
+    };
+    const onPressEscape = (e) => {
+        if (!propertyEditorRef.current?.containerHandlesEscape)
+            return;
+        e.stopPropagation();
+        onCancel();
+    };
+    const onPressEnter = (e) => {
+        if (!propertyEditorRef.current?.containerHandlesEnter)
+            return;
+        if (editorRef?.current?.hasFocus)
+            e.stopPropagation();
+        void handleContainerCommit();
+    };
+    const onPressTab = (e) => {
+        if (!propertyEditorRef.current?.containerHandlesTab)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        void handleContainerCommit();
+    };
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case Key.Escape.valueOf():
+                onPressEscape(e);
+                break;
+            case Key.Enter.valueOf():
+                onPressEnter(e);
+                break;
+            case Key.Tab.valueOf():
+                onPressTab(e);
+                break;
+            default:
+                if (propertyEditorRef.current?.containerStopsKeydownPropagation)
+                    e.stopPropagation();
+        }
+    };
+    const handleEditorBlur = () => {
+        if (ignoreEditorBlur)
+            return;
+        if (!propertyEditorRef.current?.containerHandlesBlur)
+            return;
+        void handleContainerCommit();
+    };
+    const isNewValueValid = async (value) => {
+        if (!propertyEditorRef.current)
+            return false;
+        if (!propertyRecord)
+            return false;
+        const validateResult = await propertyEditorRef.current.validateValue(value, propertyRecord);
+        if (validateResult.encounteredError) {
+            displayOutputMessage(validateResult.errorMessage);
+            return false;
+        }
+        return true;
+    };
+    const displayOutputMessage = (errorMessage) => {
+        if (!errorMessage)
+            return;
+        if (!editorRef)
+            return;
+        const htmlElement = editorRef.current?.htmlElement;
+        if (htmlElement)
+            UiAdmin.messagePresenter.displayInputFieldMessage(htmlElement, errorMessage.severity, errorMessage.briefMessage, errorMessage.detailedMessage);
+        else
+            UiAdmin.messagePresenter.displayMessage(errorMessage.severity, errorMessage.briefMessage, errorMessage.detailedMessage, errorMessage.messageType);
+    };
+    const commit = async (args) => {
+        const oldValue = args.propertyRecord.value;
+        const newValue = args.newValue;
+        if (!shouldCommit(oldValue, newValue)) {
+            return;
+        }
+        const isValid = await isNewValueValid(newValue);
+        if (!isValid)
+            return;
+        if (propertyEditorRef.current && args.propertyRecord) {
+            const commitResult = await propertyEditorRef.current.commitValue(newValue, args.propertyRecord);
+            if (commitResult.encounteredError) {
+                displayOutputMessage(commitResult.errorMessage);
+                return;
+            }
+        }
+        onCommit(args);
+    };
+    const editorProps = {
+        ref: (ref) => {
+            editorRef.current = ref ?? undefined;
+        },
+        onCommit: handleEditorCommit,
+        onCancel,
+        onBlur: handleEditorBlur,
+        setFocus: setFocus !== undefined ? setFocus : true,
+        propertyRecord,
+        shouldCommitOnChange,
+        ...rest,
+    };
+    const propDescription = propertyRecord.property;
+    const editorName = propDescription.editor !== undefined
+        ? propDescription.editor.name
+        : undefined;
+    propertyEditorRef.current = PropertyEditorManager.createEditor(propDescription.typename, editorName, propDescription.dataController);
+    const clonedNode = React.isValidElement(propertyEditorRef.current.reactNode)
+        ? React.cloneElement(propertyEditorRef.current.reactNode, editorProps)
+        : undefined;
+    return (React.createElement("span", { className: "components-editor-container", onBlur: handleContainerBlur, onKeyDown: handleKeyDown, onClick: handleClick, onContextMenu: handleClick, title: title, "data-testid": "editor-container", role: "presentation" }, clonedNode));
+}
+function arePrimitiveValuesEqual(oldValue, newValue) {
+    if (typeof oldValue !== typeof newValue) {
+        return false;
+    }
+    // directly compare simple types
+    if (typeof newValue !== "object" || newValue instanceof Date) {
+        return newValue === oldValue;
+    }
+    // compare all members of arrays
+    if (newValue instanceof Array) {
+        if (!(oldValue instanceof Array)) {
+            return false;
+        }
+        if (newValue.length !== oldValue.length) {
+            return false;
+        }
+        for (let i = 0; i < newValue.length; i++) {
+            if (oldValue[i] !== newValue[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    // compare `Point2d` and `Point3d` types
+    if ("x" in newValue) {
+        if (typeof oldValue !== "object" || !("x" in oldValue)) {
+            return false;
+        }
+        if ("z" in newValue) {
+            if (!("z" in oldValue)) {
+                return false;
+            }
+            return (newValue.x === oldValue.x &&
+                newValue.y === oldValue.y &&
+                newValue.z === oldValue.z);
+        }
+        else if ("z" in oldValue) {
+            return false;
+        }
+        return newValue.x === oldValue.x && newValue.y === oldValue.y;
+    }
+    // compare instance keys
+    if ("className" in newValue) {
+        if (typeof oldValue !== "object" || !("className" in oldValue)) {
+            return false;
+        }
+        return (oldValue.className === newValue.className && oldValue.id === newValue.id);
+    }
+    return false;
+}
+function shouldCommit(oldValue, newValue) {
+    if (oldValue.valueFormat !== newValue.valueFormat ||
+        newValue.valueFormat !== PropertyValueFormat.Primitive) {
+        return true;
+    }
+    const oldPrimitiveValue = oldValue;
+    if (!oldPrimitiveValue.value && !newValue.value) {
+        return false;
+    }
+    if ((!oldPrimitiveValue.value && newValue.value) ||
+        (oldPrimitiveValue.value && !newValue.value)) {
+        return true;
+    }
+    return !arePrimitiveValuesEqual(oldPrimitiveValue.value, newValue.value);
+}
+//# sourceMappingURL=EditorContainer.js.map

package/lib/components-react/editors/EditorContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContainer.js","sourceRoot":"","sources":["../../../src/components-react/editors/EditorContainer.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 \"./EditorContainer.scss\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type {\n  Primitives,\n  PrimitiveValue,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat, UiAdmin } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type {\n  AsyncErrorMessage,\n  PropertyEditorBase,\n} from \"./PropertyEditorManager.js\";\nimport { PropertyEditorManager } from \"./PropertyEditorManager.js\";\n\n/** Arguments for the Property Updated event callback\n * @public\n */\nexport interface PropertyUpdatedArgs {\n  /** The property being updated. */\n  propertyRecord: PropertyRecord;\n  /** The new value for the property. */\n  newValue: PropertyValue;\n}\n\n/** Properties for a property editor component\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface PropertyEditorProps extends CommonProps {\n  /** The property being updated. */\n  propertyRecord?: PropertyRecord;\n  /** Handler for commit */\n  onCommit?: (args: PropertyUpdatedArgs) => void;\n  /** Handler for cancel */\n  onCancel?: () => void;\n  /** Handler for blur */\n  onBlur?: (event: React.FocusEvent) => void;\n  /** Indicates whether the Property Editor should set focus */\n  setFocus?: boolean;\n  /**\n   * Indicates whether value change should call onCommit().\n   * @internal\n   */\n  shouldCommitOnChange?: boolean;\n}\n\n/** [[EditorContainer]] React component properties\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof EditorContainer>`\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface EditorContainerProps extends CommonProps {\n  /** The property being updated. */\n  propertyRecord: PropertyRecord;\n  /** Tooltip text */\n  title?: string;\n  /** Handler for commit */\n  onCommit: (args: PropertyUpdatedArgs) => void;\n  /** Handler for cancel */\n  onCancel: () => void;\n  /** Indicates whether the Property Editor should set focus */\n  setFocus?: boolean;\n\n  /** @internal */\n  ignoreEditorBlur?: boolean;\n  /**\n   * Indicates whether value change should call onCommit().\n   * @internal\n   */\n  shouldCommitOnChange?: boolean;\n}\n\ninterface CloneProps extends PropertyEditorProps {\n  ref: (ref: TypeEditor | null) => void;\n}\n\n/** Interface implemented by React based type editors\n * @public\n */\nexport interface TypeEditor {\n  getPropertyValue: () => Promise<PropertyValue | undefined>;\n  htmlElement: HTMLElement | null;\n  hasFocus: boolean;\n}\n\n/** EditorContainer React component used by the Tree and PropertyGrid for cell editing.\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function EditorContainer(props: EditorContainerProps) {\n  const {\n    ignoreEditorBlur,\n    title,\n    shouldCommitOnChange,\n    propertyRecord,\n    setFocus,\n    onCommit,\n    onCancel,\n    ...rest\n  } = props;\n\n  const editorRef = React.useRef<TypeEditor | undefined>();\n  const propertyEditorRef = React.useRef<PropertyEditorBase | undefined>();\n\n  const handleClick = (e: React.MouseEvent) => e.stopPropagation();\n  const handleContainerBlur = (e: React.FocusEvent) => e.stopPropagation();\n  const handleEditorCommit = (args: PropertyUpdatedArgs) => void commit(args);\n\n  const handleContainerCommit = async () => {\n    const newValue = editorRef && (await editorRef.current?.getPropertyValue());\n    if (newValue === undefined) return;\n    void commit({\n      propertyRecord,\n      newValue,\n    });\n  };\n\n  const onPressEscape = (e: React.KeyboardEvent) => {\n    if (!propertyEditorRef.current?.containerHandlesEscape) return;\n    e.stopPropagation();\n    onCancel();\n  };\n\n  const onPressEnter = (e: React.KeyboardEvent) => {\n    if (!propertyEditorRef.current?.containerHandlesEnter) return;\n    if (editorRef?.current?.hasFocus) e.stopPropagation();\n    void handleContainerCommit();\n  };\n\n  const onPressTab = (e: React.KeyboardEvent) => {\n    if (!propertyEditorRef.current?.containerHandlesTab) return;\n    e.stopPropagation();\n    e.preventDefault();\n    void handleContainerCommit();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case Key.Escape.valueOf():\n        onPressEscape(e);\n        break;\n      case Key.Enter.valueOf():\n        onPressEnter(e);\n        break;\n      case Key.Tab.valueOf():\n        onPressTab(e);\n        break;\n      default:\n        if (propertyEditorRef.current?.containerStopsKeydownPropagation)\n          e.stopPropagation();\n    }\n  };\n\n  const handleEditorBlur = () => {\n    if (ignoreEditorBlur) return;\n    if (!propertyEditorRef.current?.containerHandlesBlur) return;\n    void handleContainerCommit();\n  };\n\n  const isNewValueValid = async (value: PropertyValue) => {\n    if (!propertyEditorRef.current) return false;\n    if (!propertyRecord) return false;\n\n    const validateResult = await propertyEditorRef.current.validateValue(\n      value,\n      propertyRecord\n    );\n\n    if (validateResult.encounteredError) {\n      displayOutputMessage(validateResult.errorMessage);\n      return false;\n    }\n\n    return true;\n  };\n\n  const displayOutputMessage = (\n    errorMessage: AsyncErrorMessage | undefined\n  ) => {\n    if (!errorMessage) return;\n    if (!editorRef) return;\n\n    const htmlElement = editorRef.current?.htmlElement;\n    if (htmlElement)\n      UiAdmin.messagePresenter.displayInputFieldMessage(\n        htmlElement,\n        errorMessage.severity,\n        errorMessage.briefMessage,\n        errorMessage.detailedMessage\n      );\n    else\n      UiAdmin.messagePresenter.displayMessage(\n        errorMessage.severity,\n        errorMessage.briefMessage,\n        errorMessage.detailedMessage,\n        errorMessage.messageType\n      );\n  };\n\n  const commit = async (args: PropertyUpdatedArgs) => {\n    const oldValue = args.propertyRecord.value;\n    const newValue = args.newValue;\n\n    if (!shouldCommit(oldValue, newValue)) {\n      return;\n    }\n\n    const isValid = await isNewValueValid(newValue);\n    if (!isValid) return;\n\n    if (propertyEditorRef.current && args.propertyRecord) {\n      const commitResult = await propertyEditorRef.current.commitValue(\n        newValue,\n        args.propertyRecord\n      );\n      if (commitResult.encounteredError) {\n        displayOutputMessage(commitResult.errorMessage);\n        return;\n      }\n    }\n\n    onCommit(args);\n  };\n\n  const editorProps: CloneProps = {\n    ref: (ref) => {\n      editorRef.current = ref ?? undefined;\n    },\n    onCommit: handleEditorCommit,\n    onCancel,\n    onBlur: handleEditorBlur,\n    setFocus: setFocus !== undefined ? setFocus : true,\n    propertyRecord,\n    shouldCommitOnChange,\n    ...rest,\n  };\n\n  const propDescription = propertyRecord.property;\n\n  const editorName =\n    propDescription.editor !== undefined\n      ? propDescription.editor.name\n      : undefined;\n\n  propertyEditorRef.current = PropertyEditorManager.createEditor(\n    propDescription.typename,\n    editorName,\n    propDescription.dataController\n  );\n\n  const clonedNode = React.isValidElement(propertyEditorRef.current.reactNode)\n    ? React.cloneElement(propertyEditorRef.current.reactNode, editorProps)\n    : undefined;\n\n  return (\n    <span\n      className=\"components-editor-container\"\n      onBlur={handleContainerBlur}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      onContextMenu={handleClick}\n      title={title}\n      data-testid=\"editor-container\"\n      role=\"presentation\"\n    >\n      {clonedNode}\n    </span>\n  );\n}\n\nfunction arePrimitiveValuesEqual(\n  oldValue: Primitives.Value,\n  newValue: Primitives.Value\n): boolean {\n  if (typeof oldValue !== typeof newValue) {\n    return false;\n  }\n  // directly compare simple types\n  if (typeof newValue !== \"object\" || newValue instanceof Date) {\n    return newValue === oldValue;\n  }\n  // compare all members of arrays\n  if (newValue instanceof Array) {\n    if (!(oldValue instanceof Array)) {\n      return false;\n    }\n    if (newValue.length !== oldValue.length) {\n      return false;\n    }\n    for (let i = 0; i < newValue.length; i++) {\n      if (oldValue[i] !== newValue[i]) {\n        return false;\n      }\n    }\n    return true;\n  }\n  // compare `Point2d` and `Point3d` types\n  if (\"x\" in newValue) {\n    if (typeof oldValue !== \"object\" || !(\"x\" in oldValue)) {\n      return false;\n    }\n    if (\"z\" in newValue) {\n      if (!(\"z\" in oldValue)) {\n        return false;\n      }\n      return (\n        newValue.x === oldValue.x &&\n        newValue.y === oldValue.y &&\n        newValue.z === oldValue.z\n      );\n    } else if (\"z\" in oldValue) {\n      return false;\n    }\n    return newValue.x === oldValue.x && newValue.y === oldValue.y;\n  }\n  // compare instance keys\n  if (\"className\" in newValue) {\n    if (typeof oldValue !== \"object\" || !(\"className\" in oldValue)) {\n      return false;\n    }\n    return (\n      oldValue.className === newValue.className && oldValue.id === newValue.id\n    );\n  }\n  return false;\n}\n\nfunction shouldCommit(oldValue: PropertyValue, newValue: PropertyValue) {\n  if (\n    oldValue.valueFormat !== newValue.valueFormat ||\n    newValue.valueFormat !== PropertyValueFormat.Primitive\n  ) {\n    return true;\n  }\n  const oldPrimitiveValue = oldValue as PrimitiveValue;\n  if (!oldPrimitiveValue.value && !newValue.value) {\n    return false;\n  }\n  if (\n    (!oldPrimitiveValue.value && newValue.value) ||\n    (oldPrimitiveValue.value && !newValue.value)\n  ) {\n    return true;\n  }\n  return !arePrimitiveValuesEqual(oldPrimitiveValue.value!, newValue.value!);\n}\n"]}

package/lib/components-react/editors/EditorContainer.scss

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-editor-container {
+  width: 100%;
+}

package/lib/components-react/editors/EnumButtonGroupEditor.d.ts

@@ -0,0 +1,40 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./EnumButtonGroupEditor.scss";
+import * as React from "react";
+import type { EnumerationChoice, IconDefinition, PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** @internal */
+interface EnumButtonGroupEditorState {
+    selectValue: string | number;
+    enumIcons: IconDefinition[];
+    choices: EnumerationChoice[];
+}
+/** EnumButtonGroupEditor React component that is a property editor with select input
+ * @public
+ */
+export declare class EnumButtonGroupEditor extends React.Component<PropertyEditorProps, EnumButtonGroupEditorState> implements TypeEditor {
+    private _btnRefs;
+    private _divElement;
+    readonly state: Readonly<EnumButtonGroupEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    private _handleButtonClick;
+    private getButton;
+    render(): React.JSX.Element;
+}
+/** Enum Property Button Group Editor registered for the "enum" type name and the "enum-buttongroup" editor name.
+ * It uses the [[EnumButtonGroupEditor]] React component.
+ * @public
+ */
+export declare class EnumPropertyButtonGroupEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=EnumButtonGroupEditor.d.ts.map

package/lib/components-react/editors/EnumButtonGroupEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumButtonGroupEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/EnumButtonGroupEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAEV,iBAAiB,EACjB,cAAc,EAGd,aAAa,EACd,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAKhE,gBAAgB;AAChB,UAAU,0BAA0B;IAClC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,qBACX,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,0BAA0B,CACvE,YAAW,UAAU;IAErB,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,WAAW,CAAqC;IAExD,SAAyB,KAAK,EAAE,QAAQ,CAAC,0BAA0B,CAAC,CAIlE;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAK7B;IAEe,iBAAiB;IAIjB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IA0D/B,OAAO,CAAC,kBAAkB,CAoBxB;IAEF,OAAO,CAAC,SAAS;IAkCD,MAAM;CAkBvB;AAED;;;GAGG;AACH,qBAAa,6BAA8B,SAAQ,kBAAkB;IACnE,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

package/lib/components-react/editors/EnumButtonGroupEditor.js

@@ -0,0 +1,145 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./EnumButtonGroupEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, } from "@itwin/appui-abstract";
+import { Icon } from "@itwin/core-react";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import svgPlaceholder from "@bentley/icons-generic/icons/placeholder.svg";
+/** EnumButtonGroupEditor React component that is a property editor with select input
+ * @public
+ */
+export class EnumButtonGroupEditor extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._btnRefs = new Map();
+        this._divElement = React.createRef();
+        this.state = {
+            selectValue: "",
+            enumIcons: [],
+            choices: [],
+        };
+        this._handleButtonClick = (index) => {
+            const propertyRecord = this.props.propertyRecord;
+            if (this.state.choices && this.state.choices.length > index) {
+                const selectValue = this.state.choices[index].value;
+                this.setState({
+                    selectValue,
+                }, async () => {
+                    if (propertyRecord && this.props.onCommit) {
+                        const propertyValue = await this.getPropertyValue();
+                        if (propertyValue !== undefined) {
+                            this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                        }
+                    }
+                });
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.selectValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    componentDidMount() {
+        void this.setStateFromProps();
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const { propertyRecord } = this.props;
+        if (propertyRecord &&
+            propertyRecord.property.enum &&
+            propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            let selectValue;
+            if (typeof primitiveValue === "string") {
+                selectValue = primitiveValue;
+            }
+            else {
+                selectValue = primitiveValue;
+            }
+            let choices = [];
+            if (propertyRecord && propertyRecord.property.enum) {
+                if (propertyRecord.property.enum.choices instanceof Promise) {
+                    choices = await propertyRecord.property.enum.choices;
+                }
+                else {
+                    choices = propertyRecord.property.enum.choices;
+                }
+            }
+            const numChoices = choices.length;
+            const enumIcons = new Array(numChoices);
+            enumIcons.fill({ iconSpec: svgPlaceholder });
+            if (propertyRecord.property.editor &&
+                propertyRecord.property.editor.params) {
+                if (propertyRecord.property.editor &&
+                    propertyRecord.property.editor.params) {
+                    const bgParams = propertyRecord.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.ButtonGroupData.valueOf());
+                    if (bgParams) {
+                        bgParams.buttons.forEach((iconDef, index) => {
+                            if (index < numChoices) {
+                                enumIcons[index] = iconDef;
+                            }
+                        });
+                    }
+                }
+            }
+            this.setState({ selectValue, enumIcons, choices });
+        }
+    }
+    getButton(choice, index) {
+        const choiceValue = this.state.choices
+            ? this.state.choices[index].value
+            : 0;
+        const isActive = choiceValue === this.state.selectValue ? true : false;
+        let isDisabled = false;
+        const isEnabledFunction = this.state.enumIcons[index].isEnabledFunction;
+        if (isEnabledFunction) {
+            isDisabled = !isEnabledFunction();
+        }
+        const className = classnames("components-enumbuttongroup-button", isDisabled && "nz-is-disabled", isActive && "nz-is-active");
+        return (React.createElement("button", { ref: (ref) => ref && this._btnRefs.set(choiceValue, ref), "data-testid": choice.label, className: className, title: choice.label, key: choice.label, onClick: () => this._handleButtonClick(index) },
+            React.createElement(Icon, { iconSpec: this.state.enumIcons[index].iconSpec })));
+    }
+    render() {
+        return (React.createElement("div", { className: classnames("components-enumbuttongroup-editor", this.props.className), style: this.props.style, ref: this._divElement }, this.state.choices &&
+            this.state.enumIcons.length &&
+            this.state.choices.map((choice, index) => this.getButton(choice, index))));
+    }
+}
+/** Enum Property Button Group Editor registered for the "enum" type name and the "enum-buttongroup" editor name.
+ * It uses the [[EnumButtonGroupEditor]] React component.
+ * @public
+ */
+export class EnumPropertyButtonGroupEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(EnumButtonGroupEditor, null);
+    }
+}
+//# sourceMappingURL=EnumButtonGroupEditor.js.map

package/lib/components-react/editors/EnumButtonGroupEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumButtonGroupEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/EnumButtonGroupEditor.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 \"./EnumButtonGroupEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  ButtonGroupEditorParams,\n  EnumerationChoice,\n  IconDefinition,\n  PropertyEditorParams,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport svgPlaceholder from \"@bentley/icons-generic/icons/placeholder.svg\";\n\n// cspell:ignore buttongroup enumbuttongroup\n\n/** @internal */\ninterface EnumButtonGroupEditorState {\n  selectValue: string | number;\n  enumIcons: IconDefinition[];\n  choices: EnumerationChoice[];\n}\n\n/** EnumButtonGroupEditor React component that is a property editor with select input\n * @public\n */\nexport class EnumButtonGroupEditor\n  extends React.Component<PropertyEditorProps, EnumButtonGroupEditorState>\n  implements TypeEditor\n{\n  private _btnRefs = new Map<string | number, HTMLButtonElement>();\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<EnumButtonGroupEditorState> = {\n    selectValue: \"\",\n    enumIcons: [],\n    choices: [],\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.selectValue,\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    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  public override componentDidMount() {\n    void this.setStateFromProps();\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const { propertyRecord } = this.props;\n\n    if (\n      propertyRecord &&\n      propertyRecord.property.enum &&\n      propertyRecord.value.valueFormat === PropertyValueFormat.Primitive\n    ) {\n      const primitiveValue = propertyRecord.value.value;\n      let selectValue: string | number;\n\n      if (typeof primitiveValue === \"string\") {\n        selectValue = primitiveValue;\n      } else {\n        selectValue = primitiveValue as number;\n      }\n\n      let choices: EnumerationChoice[] = [];\n      if (propertyRecord && propertyRecord.property.enum) {\n        if (propertyRecord.property.enum.choices instanceof Promise) {\n          choices = await propertyRecord.property.enum.choices;\n        } else {\n          choices = propertyRecord.property.enum.choices;\n        }\n      }\n\n      const numChoices = choices.length;\n      const enumIcons = new Array<IconDefinition>(numChoices);\n      enumIcons.fill({ iconSpec: svgPlaceholder });\n\n      if (\n        propertyRecord.property.editor &&\n        propertyRecord.property.editor.params\n      ) {\n        if (\n          propertyRecord.property.editor &&\n          propertyRecord.property.editor.params\n        ) {\n          const bgParams = propertyRecord.property.editor.params.find(\n            (param: PropertyEditorParams) =>\n              param.type === PropertyEditorParamTypes.ButtonGroupData.valueOf()\n          ) as ButtonGroupEditorParams;\n          if (bgParams) {\n            bgParams.buttons.forEach(\n              (iconDef: IconDefinition, index: number) => {\n                if (index < numChoices) {\n                  enumIcons[index] = iconDef;\n                }\n              }\n            );\n          }\n        }\n      }\n\n      this.setState({ selectValue, enumIcons, choices });\n    }\n  }\n\n  private _handleButtonClick = (index: number) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    if (this.state.choices && this.state.choices.length > index) {\n      const selectValue = this.state.choices[index].value;\n\n      this.setState(\n        {\n          selectValue,\n        },\n        async () => {\n          if (propertyRecord && this.props.onCommit) {\n            const propertyValue = await this.getPropertyValue();\n            if (propertyValue !== undefined) {\n              this.props.onCommit({ propertyRecord, newValue: propertyValue });\n            }\n          }\n        }\n      );\n    }\n  };\n\n  private getButton(choice: EnumerationChoice, index: number) {\n    const choiceValue = this.state.choices\n      ? this.state.choices[index].value\n      : 0;\n    const isActive = choiceValue === this.state.selectValue ? true : false;\n    let isDisabled = false;\n    const isEnabledFunction = this.state.enumIcons[index].isEnabledFunction;\n    if (isEnabledFunction) {\n      isDisabled = !isEnabledFunction();\n    }\n\n    const className = classnames(\n      \"components-enumbuttongroup-button\",\n      isDisabled && \"nz-is-disabled\",\n      isActive && \"nz-is-active\"\n    );\n\n    return (\n      <button\n        ref={(ref: HTMLButtonElement | null) =>\n          ref && this._btnRefs.set(choiceValue, ref)\n        }\n        data-testid={choice.label}\n        className={className}\n        title={choice.label}\n        key={choice.label}\n        onClick={() => this._handleButtonClick(index)}\n      >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <Icon iconSpec={this.state.enumIcons[index].iconSpec} />\n      </button>\n    );\n  }\n\n  public override render() {\n    return (\n      <div\n        className={classnames(\n          \"components-enumbuttongroup-editor\",\n          this.props.className\n        )}\n        style={this.props.style}\n        ref={this._divElement}\n      >\n        {this.state.choices &&\n          this.state.enumIcons.length &&\n          this.state.choices.map((choice: EnumerationChoice, index: number) =>\n            this.getButton(choice, index)\n          )}\n      </div>\n    );\n  }\n}\n\n/** Enum Property Button Group Editor registered for the \"enum\" type name and the \"enum-buttongroup\" editor name.\n * It uses the [[EnumButtonGroupEditor]] React component.\n * @public\n */\nexport class EnumPropertyButtonGroupEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <EnumButtonGroupEditor />;\n  }\n}\n"]}

package/lib/components-react/editors/EnumButtonGroupEditor.scss

@@ -0,0 +1,141 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 22px;
+
+$icon-size: 16px;
+
+$components-enumbuttongroup-editor-item-width: 32px;
+$components-enumbuttongroup-editor-item-height: 32px;
+
+$components-enumbuttongroup-editor-item-border-width: 1px;
+$components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
+
+.components-enumbuttongroup-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  background: var(--iui-color-background);
+  width: fit-content;
+  border-color: var(--iui-color-border-foreground);
+  border-width: $components-enumbuttongroup-editor-item-border-width;
+  border-radius: var(--iui-border-radius-1);
+  border-style: solid;
+  overflow: hidden;
+  display: flex;
+  vertical-align: bottom;
+  box-sizing: border-box;
+
+  height: $components-enumbuttongroup-editor-item-height;
+
+  > * {
+    display: inline-block;
+    height: 100%;
+    width: $components-enumbuttongroup-editor-item-width;
+
+    &:not(:first-child) {
+      margin-left: $components-enumbuttongroup-editor-space-between-toolbar-items;
+
+      &:before {
+        content: "";
+        background-color: var(--iui-color-border-foreground);
+        display: block;
+        position: absolute;
+        pointer-events: none;
+        width: $components-enumbuttongroup-editor-space-between-toolbar-items;
+        height: 100%;
+        left: -$components-enumbuttongroup-editor-space-between-toolbar-items;
+        top: 0;
+      }
+    }
+  }
+}
+
+.components-enumbuttongroup-button {
+  border-width: 0;
+  background-color: var(--iui-color-background);
+  background-origin: border-box;
+  border-color: var(--iui-color-border);
+  border-style: solid;
+  cursor: pointer;
+  transition-property: background-color, color;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+  position: relative;
+  height: $components-enumbuttongroup-editor-item-height;
+  width: $components-enumbuttongroup-editor-item-width;
+
+  > i {
+    font-size: $icon-size;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    margin: 0;
+    color: var(--iui-color-icon);
+    transition: all 500ms ease;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:hover {
+    > i {
+      color: var(--iui-color-text-accent-hover);
+      transition-duration: 150ms;
+    }
+  }
+
+  &.nz-is-active {
+    background: var(--iui-color-background);
+
+    &:not(.nz-is-disabled) {
+      transition-duration: 0s;
+
+      > i {
+        color: var(--iui-color-icon-accent);
+        transition-duration: 150ms;
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+      }
+
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        background: var(--iui-color-border-accent);
+        left: 3px;
+        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;
+      }
+    }
+  }
+
+  &.nz-is-disabled {
+    pointer-events: none;
+    background-color: var(--iui-color-background-disabled);
+    border-color: var(--iui-color-border-disabled);
+    cursor: not-allowed;
+
+    > i {
+      color: var(--iui-color-icon-disabled);
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+}

package/lib/components-react/editors/EnumEditor.d.ts

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./EnumEditor.scss";
+import * as React from "react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { SelectOption } from "@itwin/itwinui-react";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** @internal */
+interface EnumEditorState {
+    selectValue: string | number;
+    valueIsNumber: boolean;
+    options: SelectOption<string>[];
+    parentDiv: HTMLDivElement | null;
+}
+/** EnumEditor React component that is a property editor with select input
+ * @public
+ */
+export declare class EnumEditor extends React.PureComponent<PropertyEditorProps, EnumEditorState> implements TypeEditor {
+    private _isMounted;
+    private _divElement;
+    readonly state: Readonly<EnumEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private _updateSelectValue;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    render(): React.JSX.Element;
+}
+/** Enum Property Button Group Editor registered for the "enum" type name.
+ * It uses the [[EnumEditor]] React component.
+ * @public
+ */
+export declare class EnumPropertyEditor extends PropertyEditorBase {
+    get containerHandlesEnter(): boolean;
+    get containerStopsKeydownPropagation(): boolean;
+    get reactNode(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=EnumEditor.d.ts.map

package/lib/components-react/editors/EnumEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/EnumEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,gBAAgB;AAChB,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAChC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,qBAAa,UACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,eAAe,CAChE,YAAW,UAAU;IAErB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAqC;IAExD,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAKvD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAK7B;IAED,OAAO,CAAC,kBAAkB,CAwBxB;IAEc,iBAAiB;IAKjB,oBAAoB;IAIpB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IA6Cf,MAAM;CAwCvB;AAED;;;GAGG;AACH,qBAAa,kBAAmB,SAAQ,kBAAkB;IACxD,IAAoB,qBAAqB,IAAI,OAAO,CAEnD;IACD,IAAoB,gCAAgC,IAAI,OAAO,CAE9D;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}