Form component

packages/toolpad-app/src/appDom/index.ts

@@ -607,6 +607,15 @@ export function getPageAncestor(dom: AppDom, node: AppDomNode): PageNode | null
   return null;
 }
 
+/**
+ * Returns all nodes with a given component type
+ */
+export function getComponentTypeNodes(dom: AppDom, componentId: string): readonly AppDomNode[] {
+  return Object.values(dom.nodes).filter(
+    (node) => isElement(node) && node.attributes.component.value === componentId,
+  );
+}
+
 /**
  * Returns the set of names for which the given node must have a different name
  */

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -462,6 +462,7 @@ function RenderedNodeContent({ node, childNodeGroups, Component }: RenderedNodeC
   return (
     <NodeRuntimeWrapper
       nodeId={nodeId}
+      nodeName={node.name}
       componentConfig={Component[TOOLPAD_COMPONENT]}
       NodeError={NodeError}
     >
@@ -1085,7 +1086,6 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
               childNodeGroups={{ children }}
               Component={PageRootComponent}
             />
-
             {queries.map((node) => (
               <FetchNode key={node.id} page={page} node={node} />
             ))}

packages/toolpad-app/src/toolpad/AppEditor/NodeNameEditor.tsx

@@ -46,7 +46,7 @@ export default function NodeNameEditor({ node, sx }: NodeNameEditorProps) {
     <TextField
       sx={sx}
       fullWidth
-      label="name"
+      label="Node name"
       error={!isNameValid}
       helperText={nodeNameError}
       value={nameInput}

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx

@@ -23,7 +23,6 @@ const FUTURE_COMPONENTS = new Map<string, FutureComponentSpec>([
   ['Drawer', { url: 'https://github.com/mui/mui-toolpad/issues/1540', displayName: 'Drawer' }],
   ['Html', { url: 'https://github.com/mui/mui-toolpad/issues/1311', displayName: 'Html' }],
   ['Icon', { url: 'https://github.com/mui/mui-toolpad/issues/83', displayName: 'Icon' }],
-  ['Form', { url: 'https://github.com/mui/mui-toolpad/issues/749', displayName: 'Form' }],
   ['Card', { url: 'https://github.com/mui/mui-toolpad/issues/748', displayName: 'Card' }],
   ['Slider', { url: 'https://github.com/mui/mui-toolpad/issues/746', displayName: 'Slider' }],
   ['Switch', { url: 'https://github.com/mui/mui-toolpad/issues/745', displayName: 'Switch' }],

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -1,5 +1,6 @@
 import { Stack, styled, Typography, Divider } from '@mui/material';
 import * as React from 'react';
+import * as _ from 'lodash-es';
 import {
   ArgTypeDefinition,
   ArgTypeDefinitions,
@@ -97,6 +98,11 @@ function ComponentPropsEditor<P extends object>({
     );
   }, [bindings, node.id]);
 
+  const argTypesByCategory = _.groupBy(
+    Object.entries(componentConfig.argTypes || {}) as ExactEntriesOf<ArgTypeDefinitions<P>>,
+    ([, propTypeDef]) => propTypeDef?.category || 'properties',
+  );
+
   return (
     <React.Fragment>
       {hasLayoutControls ? (
@@ -121,24 +127,26 @@ function ComponentPropsEditor<P extends object>({
           <Divider sx={{ mt: 1 }} />
         </React.Fragment>
       ) : null}
-      <Typography variant="overline" className={classes.sectionHeading}>
-        Properties:
-      </Typography>
-      {(
-        Object.entries(componentConfig.argTypes || {}) as ExactEntriesOf<ArgTypeDefinitions<P>>
-      ).map(([propName, propTypeDef]) =>
-        propTypeDef && shouldRenderControl(propTypeDef, propName, props, componentConfig) ? (
-          <div key={propName} className={classes.control}>
-            <NodeAttributeEditor
-              node={node}
-              namespace="props"
-              props={props}
-              name={propName}
-              argType={propTypeDef}
-            />
-          </div>
-        ) : null,
-      )}
+      {Object.entries(argTypesByCategory).map(([category, argTypeEntries]) => (
+        <React.Fragment key={category}>
+          <Typography variant="overline" className={classes.sectionHeading}>
+            {category}:
+          </Typography>
+          {argTypeEntries.map(([propName, propTypeDef]) =>
+            propTypeDef && shouldRenderControl(propTypeDef, propName, props, componentConfig) ? (
+              <div key={propName} className={classes.control}>
+                <NodeAttributeEditor
+                  node={node}
+                  namespace="props"
+                  props={props}
+                  name={propName}
+                  argType={propTypeDef}
+                />
+              </div>
+            ) : null,
+          )}
+        </React.Fragment>
+      ))}
     </React.Fragment>
   );
 }

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx

@@ -110,7 +110,7 @@ export default function EditorCanvasHost({
   const [editorOverlayRoot, setEditorOverlayRoot] = React.useState<HTMLElement | null>(null);
 
   const handleKeyDown = useEvent((event: KeyboardEvent) => {
-    const isZ = event.key.toLowerCase() === 'z';
+    const isZ = !!event.key && event.key.toLowerCase() === 'z';
 
     const undoShortcut = isZ && (event.metaKey || event.ctrlKey);
     const redoShortcut = undoShortcut && event.shiftKey;

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx

@@ -44,7 +44,7 @@ const NodeHudWrapper = styled('div', {
   outline: `1px dotted ${isOutlineVisible ? theme.palette.primary[500] : 'transparent'}`,
   zIndex: 80,
   '&:hover': {
-    outline: `2px dashed ${isHoverable ? 'transparent' : theme.palette.primary[500]}`,
+    outline: `2px dashed ${isHoverable ? theme.palette.primary[500] : 'transparent'}`,
   },
   [`.${nodeHudClasses.selected}`]: {
     position: 'absolute',

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx

@@ -22,6 +22,8 @@ import {
   isPageColumn,
   PAGE_ROW_COMPONENT_ID,
   PAGE_COLUMN_COMPONENT_ID,
+  isFormComponent,
+  FORM_COMPONENT_ID,
 } from '../../../../toolpadComponents';
 import { PinholeOverlay } from '../../../../PinholeOverlay';
 import {
@@ -436,9 +438,12 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
       return new Set();
     }
     return new Set(
-      [...appDom.getPageAncestors(dom, selectedNode), selectedNode].map(
-        (interactiveNode) => interactiveNode.id,
-      ),
+      [
+        ...appDom
+          .getPageAncestors(dom, selectedNode)
+          .filter((ancestor) => appDom.isElement(ancestor) && isPageLayoutComponent(ancestor)),
+        selectedNode,
+      ].map((ancestor) => ancestor.id),
     );
   }, [dom, selectedNode]);
 
@@ -519,20 +524,33 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
 
   const isEmptyPage = pageNodes.length <= 1;
 
+  /**
+   * Return all nodes that are available for insertion.
+   * i.e. Exclude all descendants of the current selection since inserting in one of
+   * them would create a cyclic structure.
+   */
   const availableDropTargets = React.useMemo((): appDom.AppDomNode[] => {
     if (!draggedNode) {
       return [];
     }
 
-    /**
-     * Return all nodes that are available for insertion.
-     * i.e. Exclude all descendants of the current selection since inserting in one of
-     * them would create a cyclic structure.
-     */
-    const excludedNodes =
-      selectedNode && !newNode
-        ? new Set<appDom.AppDomNode>([selectedNode, ...appDom.getDescendants(dom, selectedNode)])
-        : new Set();
+    let excludedNodes = new Set();
+
+    if (selectedNode && !newNode) {
+      excludedNodes = new Set<appDom.AppDomNode>([
+        selectedNode,
+        ...appDom.getDescendants(dom, selectedNode),
+      ]);
+    }
+
+    if (isFormComponent(draggedNode)) {
+      const formNodes = appDom.getComponentTypeNodes(dom, FORM_COMPONENT_ID);
+      const formNodeDescendants = formNodes
+        .map((formNode) => appDom.getDescendants(dom, formNode))
+        .flat();
+
+      formNodeDescendants.forEach(excludedNodes.add, excludedNodes);
+    }
 
     return pageNodes.filter((n) => !excludedNodes.has(n));
   }, [dom, draggedNode, newNode, pageNodes, selectedNode]);
@@ -1581,7 +1599,6 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
         const isPageColumnChild = parent ? appDom.isElement(parent) && isPageColumn(parent) : false;
 
         const isSelected = selectedNode && !newNode ? selectedNode.id === node.id : false;
-        const isInteractive = interactiveNodes.has(node.id) && !draggedNode && !draggedEdge;
 
         const isHorizontallyResizable = isSelected && (isPageRowChild || isPageColumnChild);
         const isVerticallyResizable =
@@ -1590,6 +1607,8 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
         const isResizing = Boolean(draggedEdge);
         const isResizingNode = isResizing && node.id === draggedNodeId;
 
+        const isInteractive = interactiveNodes.has(node.id) && !isResizing && !isDraggingOver;
+
         if (!nodeRect) {
           return null;
         }
@@ -1618,7 +1637,7 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
                 onDelete={handleNodeDelete(node.id)}
                 isResizing={isResizingNode}
                 resizePreviewElementRef={resizePreviewElementRef}
-                isHoverable={isResizing && !isDraggingOver}
+                isHoverable={!isResizing && !isDraggingOver}
                 isOutlineVisible={isDraggingOver}
               />
             ) : null}

packages/toolpad-app/src/toolpadComponents/index.tsx

@@ -17,6 +17,7 @@ export type InstantiatedComponents = Record<string, InstantiatedComponent | unde
 export const PAGE_ROW_COMPONENT_ID = 'PageRow';
 export const PAGE_COLUMN_COMPONENT_ID = 'PageColumn';
 export const STACK_COMPONENT_ID = 'Stack';
+export const FORM_COMPONENT_ID = 'Form';
 
 export const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
   [PAGE_ROW_COMPONENT_ID, { displayName: 'Row', builtIn: 'PageRow', system: true }],
@@ -40,6 +41,7 @@ export const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
   ['Paper', { displayName: 'Paper', builtIn: 'Paper' }],
   ['Tabs', { displayName: 'Tabs', builtIn: 'Tabs' }],
   ['Container', { displayName: 'Container', builtIn: 'Container' }],
+  [FORM_COMPONENT_ID, { displayName: 'Form', builtIn: 'Form' }],
 ]);
 
 function createCodeComponent(domNode: appDom.CodeComponentNode): ToolpadComponentDefinition {
@@ -84,3 +86,7 @@ export function isPageColumn(elementNode: appDom.ElementNode): boolean {
 export function isPageLayoutComponent(elementNode: appDom.ElementNode): boolean {
   return isPageRow(elementNode) || isPageColumn(elementNode);
 }
+
+export function isFormComponent(elementNode: appDom.ElementNode): boolean {
+  return getElementNodeComponentId(elementNode) === FORM_COMPONENT_ID;
+}

packages/toolpad-components/src/Button.tsx

@@ -53,6 +53,10 @@ export default createComponent(Button, {
       helperText: 'Whether the button is disabled.',
       typeDef: { type: 'boolean' },
     },
+    type: {
+      helperText: 'Button HTML type',
+      typeDef: { type: 'string', enum: ['button', 'submit', 'reset'], default: 'button' },
+    },
     sx: {
       helperText: SX_PROP_HELPER_TEXT,
       typeDef: { type: 'object' },