[Property-grid]: add callback to show only editor (#1090)

* Initial

* extract-api

* fix

* extract-api

* extract-api

* add test

* change

* adjustments

* fixes

* extract-api

* extract-api

* NextVersion md

(cherry picked from commit fa31495)

# Conflicts:
#	docs/changehistory/NextVersion.md

common/api/components-react.api.md

@@ -246,6 +246,7 @@ export interface CheckboxStateChange {
 export interface CommonPropertyGridProps extends CommonProps {
     actionButtonRenderers?: ActionButtonRenderer[];
     actionButtonWidth?: number;
+    alwaysShowEditor?: (property: PropertyRecord) => boolean;
     horizontalOrientationMinWidth?: number;
     isOrientationFixed?: boolean;
     isPropertyEditingEnabled?: boolean;
@@ -547,6 +548,7 @@ export interface EditorContainerProps extends CommonProps {
     // @internal (undocumented)
     ignoreEditorBlur?: boolean;
     onCancel: () => void;
+    onClick?: () => void;
     onCommit: (args: PropertyUpdatedArgs) => void;
     propertyRecord: PropertyRecord;
     setFocus?: boolean;
@@ -2325,9 +2327,11 @@ export enum SelectionModeFlags {
 // @public
 export interface SharedRendererProps {
     actionButtonRenderers?: ActionButtonRenderer[];
+    alwaysShowEditor?: (property: PropertyRecord) => boolean;
     columnInfo?: PropertyGridColumnInfo;
     columnRatio?: number;
     isHoverable?: boolean;
+    isPropertyEditingEnabled?: boolean;
     isResizeHandleBeingDragged?: boolean;
     isResizeHandleHovered?: boolean;
     isSelectable?: boolean;
@@ -3261,6 +3265,8 @@ export interface VirtualizedPropertyGridContext {
     // (undocumented)
     actionButtonRenderers?: ActionButtonRenderer[];
     // (undocumented)
+    alwaysShowEditor?: (property: PropertyRecord) => boolean;
+    // (undocumented)
     columnInfo: PropertyGridColumnInfo;
     // (undocumented)
     columnRatio: number;
@@ -3275,6 +3281,8 @@ export interface VirtualizedPropertyGridContext {
     // (undocumented)
     highlight?: PropertyGridContentHighlightProps;
     // (undocumented)
+    isPropertyEditingEnabled?: boolean;
+    // (undocumented)
     isPropertyHoverEnabled: boolean;
     // (undocumented)
     isPropertySelectionEnabled: boolean;

common/changes/@itwin/components-react/mast-property-grid-callback-to-show-only-editor_2024-10-31-10-15.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/components-react",
+      "comment": "Added a callback to `VirtualizedPropertyGrid` which determines which editors should always be visible",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/components-react"
+}

docs/changehistory/NextVersion.md

@@ -1,5 +1,6 @@
 # NextVersion <!-- omit from toc -->
 
+<<<<<<< HEAD
 Table of contents:
 
 - [Drop support for iTwin.js 3.x](#drop-support-for-itwinjs-3x)
@@ -165,3 +166,13 @@ AppUI packages now specify `@itwin/itwinui-react` as a [peer dependency](https:/
 ### Changes
 
 - Removed the `resize-observer-polyfill` dependency because `ResizeObserver` is well supported by modern browsers, eliminating the need for a polyfill. [#1045](https://github.com/iTwin/appui/pull/1045)
+=======
+- [@itwin/components-react](#itwincomponents-react)
+  - [Additions](#additions)
+
+## @itwin/components-react
+
+### Additions
+
+- Added a callback to `VirtualizedPropertyGrid` which determines which editors should always be visible. [#1090](https://github.com/iTwin/appui/pull/1090)
+>>>>>>> fa31495e9 ([Property-grid]: add callback to show only editor (#1090))

docs/storybook/src/components/PropertyGrid.stories.tsx

@@ -15,7 +15,7 @@ import {
   PropertyDataChangeEvent,
   PropertyValueRendererManager,
   VirtualizedPropertyGridWithDataProvider,
-} from "@itwin/components-react-internal/src/components-react";
+} from "@itwin/components-react";
 import { MultilineTextPropertyValueRenderer } from "@itwin/components-react-internal/src/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer";
 
 import { AppUiDecorator } from "../Decorators";
@@ -364,6 +364,78 @@ export const Links: Story = {
   },
 };
 
+export const AlwaysVisibleEditor: Story = {
+  args: {
+    dataProvider: {
+      getData: async () => ({
+        label: PropertyRecord.fromString("Record 1"),
+        categories: [
+          { name: "Group_1", label: "Group 1", expand: true },
+          { name: "Group_2", label: "Group 2", expand: true },
+        ],
+        records: {
+          Group_1: [
+            new PropertyRecord(
+              {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: true,
+              },
+              {
+                name: "toggleProperty",
+                displayLabel: "Always visible toggle editor",
+                typename: "boolean",
+                editor: { name: "toggle" },
+              }
+            ),
+            new PropertyRecord(
+              {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: false,
+              },
+              {
+                name: "toggleProperty2",
+                displayLabel: "Always visible toggle editor",
+                typename: "boolean",
+                editor: { name: "toggle" },
+              }
+            ),
+          ],
+          Group_2: [
+            new PropertyRecord(
+              {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: true,
+              },
+              {
+                name: "toggleProperty3",
+                displayLabel: "Not always visible boolean editor",
+                typename: "boolean",
+              }
+            ),
+            new PropertyRecord(
+              {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: "Text",
+              },
+              {
+                name: "stringProperty",
+                displayLabel: "Not always visible string editor",
+                typename: "string",
+              }
+            ),
+          ],
+          Group_3: [],
+        },
+      }),
+      onDataChanged: new PropertyDataChangeEvent(),
+    },
+    onPropertyContextMenu: undefined,
+    isPropertyEditingEnabled: true,
+    alwaysShowEditor: (propertyRecord: PropertyRecord) =>
+      propertyRecord.property.editor?.name === "toggle",
+  },
+};
+
 rendererManager.registerRenderer("customRendererStructPropertyRenderer", {
   canRender: () => true,
   render: (record) => {
@@ -401,7 +473,7 @@ rendererManager.registerRenderer("customRendererArrayPropertyRenderer", {
 rendererManager.registerRenderer("defaultRendererPropertyRenderer", {
   canRender: () => false,
   render: () => {
-    <div>Should not render</div>;
+    return <div>Should not render</div>;
   },
 });
 

ui/components-react/src/components-react/editors/EditorContainer.tsx

@@ -71,6 +71,8 @@ export interface EditorContainerProps extends CommonProps {
   onCancel: () => void;
   /** Indicates whether the Property Editor should set focus */
   setFocus?: boolean;
+  /** Handler for click */
+  onClick?: () => void;
 
   /** @internal */
   ignoreEditorBlur?: boolean;
@@ -107,13 +109,18 @@ export function EditorContainer(props: EditorContainerProps) {
     setFocus,
     onCommit,
     onCancel,
+    onClick,
     ...rest
   } = props;
 
   const editorRef = React.useRef<TypeEditor | undefined>();
   const propertyEditorRef = React.useRef<PropertyEditorBase | undefined>();
 
-  const handleClick = (e: React.MouseEvent) => e.stopPropagation();
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.();
+    e.stopPropagation();
+  };
+  const handleContextMenu = (e: React.MouseEvent) => e.stopPropagation();
   const handleContainerBlur = (e: React.FocusEvent) => e.stopPropagation();
   const handleEditorCommit = (args: PropertyUpdatedArgs) => void commit(args);
 
@@ -269,7 +276,7 @@ export function EditorContainer(props: EditorContainerProps) {
       onBlur={handleContainerBlur}
       onKeyDown={handleKeyDown}
       onClick={handleClick}
-      onContextMenu={handleClick}
+      onContextMenu={handleContextMenu}
       title={title}
       data-testid="editor-container"
       role="presentation"

ui/components-react/src/components-react/properties/renderers/PropertyRenderer.tsx

@@ -56,6 +56,8 @@ export interface SharedRendererProps {
   actionButtonRenderers?: ActionButtonRenderer[];
   /** Is resize handle hovered */
   isResizeHandleHovered?: boolean;
+  /** Enables/disables property editing */
+  isPropertyEditingEnabled?: boolean;
   /** Callback to hover event change */
   onResizeHandleHoverChanged?: (isHovered: boolean) => void;
   /** Is resize handle being dragged */
@@ -64,6 +66,8 @@ export interface SharedRendererProps {
   onResizeHandleDragChanged?: (isDragStarted: boolean) => void;
   /** Information for styling property grid columns */
   columnInfo?: PropertyGridColumnInfo;
+  /** Callback to determine which editors should be always visible */
+  alwaysShowEditor?: (property: PropertyRecord) => boolean;
 }
 
 /** Properties of [[PropertyRenderer]] React component
@@ -101,6 +105,10 @@ export const PropertyRenderer = (props: PropertyRendererProps) => {
     propertyValueRendererManager,
     onEditCommit,
     onEditCancel,
+    alwaysShowEditor,
+    isPropertyEditingEnabled,
+    onClick,
+    uniqueKey,
     ...restProps
   } = props;
 
@@ -115,14 +123,19 @@ export const PropertyRenderer = (props: PropertyRendererProps) => {
     if (onEditCancel) onEditCancel();
   }, [onEditCancel]);
 
+  const alwaysShowsEditor = props.alwaysShowEditor
+    ? props.alwaysShowEditor(props.propertyRecord)
+    : false;
+
   React.useEffect(() => {
-    if (isEditing) {
+    if (isEditing || (alwaysShowsEditor && isPropertyEditingEnabled)) {
       setDisplayValue(
         <EditorContainer
           propertyRecord={propertyRecord}
           onCommit={onCommit}
           onCancel={onCancel}
-          setFocus={true}
+          setFocus={isEditing}
+          onClick={() => onClick?.(propertyRecord, uniqueKey)}
         />
       );
       return;
@@ -144,10 +157,16 @@ export const PropertyRenderer = (props: PropertyRendererProps) => {
     onCommit,
     onCancel,
     isEditing,
+    alwaysShowsEditor,
+    isPropertyEditingEnabled,
+    onClick,
+    uniqueKey,
   ]);
 
   const primitiveRendererProps: PrimitiveRendererProps = {
     ...restProps,
+    onClick,
+    uniqueKey,
     propertyRecord,
     orientation,
     indentation,

ui/components-react/src/components-react/propertygrid/component/PropertyGridCommons.ts

@@ -92,6 +92,8 @@ export interface CommonPropertyGridProps extends CommonProps {
    * to render an action button for the property or not.
    */
   actionButtonRenderers?: ActionButtonRenderer[];
+  /** Callback to determine which editors should be always visible */
+  alwaysShowEditor?: (property: PropertyRecord) => boolean;
 }
 
 /**

ui/components-react/src/components-react/propertygrid/component/PropertyGridEventsRelatedPropsSupplier.tsx

@@ -43,7 +43,6 @@ export type PropertyGridEventsRelatedPropsSupplierProps = Pick<
   CommonPropertyGridProps,
   | "onPropertyContextMenu"
   | "isPropertySelectionOnRightClickEnabled"
-  | "isPropertySelectionOnRightClickEnabled"
   | "onPropertySelectionChanged"
   | "isPropertyEditingEnabled"
   | "onPropertyUpdated"

ui/components-react/src/components-react/propertygrid/component/VirtualizedPropertyGrid.tsx

@@ -109,7 +109,9 @@ export interface VirtualizedPropertyGridContext {
   isPropertyHoverEnabled: boolean;
   isPropertySelectionEnabled: boolean;
   selectedPropertyKey?: string;
+  isPropertyEditingEnabled?: boolean;
 
+  alwaysShowEditor?: (property: PropertyRecord) => boolean;
   onPropertyClicked?: (property: PropertyRecord, key?: string) => void;
   onPropertyRightClicked?: (property: PropertyRecord, key?: string) => void;
   onPropertyContextMenu?: (
@@ -372,7 +374,9 @@ export class VirtualizedPropertyGrid extends React.Component<
                 isPropertySelectionEnabled:
                   selectionContext.isPropertySelectionEnabled,
                 selectedPropertyKey: selectionContext.selectedPropertyKey,
+                isPropertyEditingEnabled: this.props.isPropertyEditingEnabled,
 
+                alwaysShowEditor: this.props.alwaysShowEditor,
                 onPropertyClicked: selectionContext.onPropertyClicked,
                 onPropertyRightClicked: selectionContext.onPropertyRightClicked,
                 onPropertyContextMenu: selectionContext.onPropertyContextMenu,
@@ -602,6 +606,8 @@ const FlatGridItemNode = React.memo(
                 onContextMenu={gridContext.onPropertyContextMenu}
                 category={parentCategoryItem.derivedCategory}
                 isEditing={selectionKey === gridContext.editingPropertyKey}
+                isPropertyEditingEnabled={gridContext.isPropertyEditingEnabled}
+                alwaysShowEditor={gridContext.alwaysShowEditor}
                 onEditCommit={gridContext.onEditCommit}
                 onEditCancel={gridContext.onEditCancel}
                 isExpanded={node.isExpanded}