Only expand object control if data is plain object or array.

code/ui/.storybook/preview.tsx

@@ -260,7 +260,6 @@ export const decorators = [
 ];
 
 export const parameters = {
-  actions: { argTypesRegex: '^on.*' },
   options: {
     storySort: (a, b) =>
       a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),

code/ui/blocks/src/controls/Object.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ObjectControl } from './Object';
+import { fn } from '@storybook/test';
 
 export default {
   component: ObjectControl,
@@ -53,3 +54,34 @@ export const Undefined: StoryObj<typeof ObjectControl> = {
     value: undefined,
   },
 };
+
+class Person {
+  constructor(
+    public firstName: string,
+    public lastName: string
+  ) {}
+
+  fullName() {
+    return `${this.firstName} ${this.lastName}`;
+  }
+}
+
+/**
+ * We show a class collapsed as it might contain many methods.
+ * It is read-only as we can not construct the class.
+ */
+export const Class: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: new Person('Kasper', 'Peulen'),
+  },
+};
+
+/**
+ * We show a function collapsed. Even if it is "object" like, such as "fn".
+ * It is read-only as we can not construct a function.
+ */
+export const Function: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: fn(),
+  },
+};

code/ui/blocks/src/controls/Object.tsx

@@ -5,7 +5,7 @@ import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'
 import { styled, useTheme, type Theme } from '@storybook/theming';
 import { Form, IconButton, Button } from '@storybook/components';
 import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
-import { JsonTree, getObjectType } from './react-editable-json-tree';
+import { JsonTree } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
 
@@ -247,7 +247,6 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
-
   const [showRaw, setShowRaw] = useState(!hasData);
   const [parseError, setParseError] = useState<Error>(null);
   const updateRaw: (raw: string) => void = useCallback(
@@ -294,9 +293,12 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
     />
   );
 
+  const isObjectOrArray =
+    Array.isArray(value) || (typeof value === 'object' && value?.constructor === Object);
+
   return (
     <Wrapper>
-      {['Object', 'Array'].includes(getObjectType(data)) && (
+      {isObjectOrArray && (
         <RawButton
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
@@ -309,6 +311,8 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
       )}
       {!showRaw ? (
         <JsonTree
+          readOnly={!isObjectOrArray}
+          isCollapsed={() => !isObjectOrArray}
           data={data}
           rootName={name}
           onFullyUpdate={onChange}