Squashed commit of the following:

commit b43354e
Author: Carl Smith <[email protected]>
Date:   Thu Jul 25 11:35:42 2024 +1200

    Update Undefined.tsx

commit 45ad791
Author: Carl Smith <[email protected]>
Date:   Thu Jul 25 11:33:15 2024 +1200

    Update Undefined.tsx

commit a9987e5
Author: Carl Smith <[email protected]>
Date:   Thu Jul 25 11:31:08 2024 +1200

    Update Undefined.tsx

commit 4cf1234
Merge: 8539748 130d33e
Author: Carl Smith <[email protected]>
Date:   Thu Jul 25 11:02:31 2024 +1200

    Merge branch 'main' into 94-undefined-component

commit 8539748
Author: Carl Smith <[email protected]>
Date:   Fri Jul 19 13:35:21 2024 +1200

    INIT

Author: CarlosNZ

demo/src/customComponents/DateTimePicker.tsx

@@ -11,7 +11,7 @@
 import React from 'react'
 import DatePicker from 'react-datepicker'
 import { Button } from '@chakra-ui/react'
-import { CustomNodeProps, CustomNodeDefinition } from '../JsonEditImport'
+import { CustomNodeProps, CustomNodeDefinition } from '../_imports'
 
 // Styles
 import 'react-datepicker/dist/react-datepicker.css'

demo/src/customComponents/Undefined.tsx

@@ -0,0 +1,21 @@
+// This is not exported with the package, but here is a simple way to get
+// "undefined" nodes to be editable, and the "undefined" type to appear in the
+// type selector
+
+import React from 'react'
+import { CustomNodeProps, CustomNodeDefinition } from 'json-edit-react'
+
+export const Undefined: React.FC<CustomNodeProps> = ({ children }) => {
+  return <>{children}</>
+}
+
+// Definition for custom node behaviour
+export const undefinedNodeDefinition: CustomNodeDefinition = {
+  condition: ({ value }) => typeof value === 'undefined',
+  element: Undefined, // the component defined above
+  showOnView: false,
+  showOnEdit: false,
+  name: 'undefined', // shown in the Type selector menu
+  showInTypesSelector: true,
+  defaultValue: undefined, // when instantiated
+}

demo/src/demoData/data.tsx

@@ -4,6 +4,7 @@ export const data: Record<string, object> = {
     number: 99,
     boolean: true,
     nothing: null,
+    undefined: undefined,
     Usage: [
       'Edit a value by clicking the "edit" icon, or double-clicking the value.',
       'You can change the type of any value',

demo/src/demoData/dataDefinitions.tsx

@@ -25,6 +25,7 @@ import { Input } from 'object-property-assigner/build'
 import jsonSchema from './jsonSchema.json'
 import customNodesSchema from './customNodesSchema.json'
 import Ajv from 'ajv'
+import { undefinedNodeDefinition } from '../customComponents/Undefined'
 
 const ajv = new Ajv()
 const validateJsonSchema = ajv.compile(jsonSchema)
@@ -90,7 +91,7 @@ export const demoDataDefinitions: Record<string, DemoData> = {
     rootName: 'data',
     collapse: 2,
     data: data.intro,
-    customNodeDefinitions: [dateNodeDefinition],
+    customNodeDefinitions: [dateNodeDefinition, undefinedNodeDefinition],
   },
   starWars: {
     name: '🚀 Star Wars',