add gridCallbacks

packages/runtime/src/App.tsx

@@ -18,7 +18,7 @@ export const App: React.FC<AppProps> = props => {
     options,
     mModules,
     componentWrapper,
-    onLayoutChange,
+    gridCallbacks,
     debugStore = true,
     debugEvent = true,
   } = props;
@@ -28,13 +28,13 @@ export const App: React.FC<AppProps> = props => {
 
   const { topLevelComponents, slotComponentsMap } = useMemo(
     () =>
-      resolveAppComponents(
+      resolveAppComponents({
         mModules,
-        app.spec.components,
+        components: app.spec.components,
         app,
         componentWrapper,
-        onLayoutChange
-      ),
+        gridCallbacks,
+      }),
     [app]
   );
 
@@ -50,7 +50,7 @@ export const App: React.FC<AppProps> = props => {
             targetSlot={null}
             app={app}
             componentWrapper={componentWrapper}
-            onLayoutChange={onLayoutChange}
+            gridCallbacks={gridCallbacks}
           />
         );
       })}

packages/runtime/src/components/_internal/GridLayout.tsx

@@ -32,7 +32,7 @@ const GridLayout: React.FC<{
       onDragStart={() => {
         console.log('dragstart');
       }}
-      // onDrop={onLayoutChange}
+      onDrop={onLayoutChange}
       isDroppable={true}
     >
       {children}

packages/runtime/src/components/chakra-ui/List.tsx

@@ -57,11 +57,11 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
       }
     ).parsedtemplete;
 
-    const { topLevelComponents, slotComponentsMap } = resolveAppComponents(
+    const { topLevelComponents, slotComponentsMap } = resolveAppComponents({
       mModules,
-      evaledTemplate,
-      app
-    );
+      components: evaledTemplate,
+      app,
+    });
 
     const componentElements = topLevelComponents.map(c => {
       return (

packages/runtime/src/components/core/GridLayout.tsx

@@ -11,15 +11,15 @@ const BaseGridLayout = React.lazy(() => import('../../components/_internal/GridL
 const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
   slotsMap,
   layout = [],
-  onLayoutChange,
+  gridCallbacks,
   component,
 }) => {
-  const _onLayoutChange = (layout: RGL.Layout[]) => {
-    onLayoutChange && onLayoutChange(component.id, layout);
+  const onLayoutChange = (layout: RGL.Layout[]) => {
+    gridCallbacks?.onLayoutChange && gridCallbacks?.onLayoutChange(component.id, layout);
   };
   return (
     <Suspense fallback={null}>
-      <BaseGridLayout onLayoutChange={_onLayoutChange} layout={layout}>
+      <BaseGridLayout onLayoutChange={onLayoutChange} layout={layout}>
         {getSlots(slotsMap, 'container')}
       </BaseGridLayout>
     </Suspense>

packages/runtime/src/modules/ImplWrapper.tsx

@@ -16,13 +16,11 @@ export const ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>(
   (props, ref) => {
     const {
       component: c,
-      slotsMap,
       targetSlot,
       app,
       children,
       componentWrapper: ComponentWrapper,
       mModules,
-      onLayoutChange,
     } = props;
 
     const { registry, stateManager, globalHandlerMap, apiService } = props.mModules;
@@ -158,14 +156,10 @@ export const ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>(
     const C = (
       <Impl
         key={c.id}
-        component={c}
         {...mergedProps}
-        mModules={mModules}
+        {...props}
         mergeState={mergeState}
         subscribeMethods={subscribeMethods}
-        onLayoutChange={onLayoutChange}
-        slotsMap={slotsMap}
-        app={app}
       />
     );
 

packages/runtime/src/modules/registry.tsx

@@ -38,9 +38,12 @@ import CoreStyle from '../traits/core/style';
 import CoreHidden from '../traits/core/hidden';
 import CoreFetch from '../traits/core/fetch';
 import CoreValidation from '../traits/core/validation';
-import { ComponentMergedProps, TraitImplementation } from 'src/types/RuntimeSchema';
+import {
+  ComponentImplementationProps,
+  TraitImplementation,
+} from 'src/types/RuntimeSchema';
 
-export type ComponentImplementation<T = any> = React.FC<T & ComponentMergedProps>;
+export type ComponentImplementation<T = any> = React.FC<T & ComponentImplementationProps>;
 
 type ImplementedRuntimeComponent = RuntimeComponent & {
   impl: ComponentImplementation;

packages/runtime/src/modules/resolveAppComponents.tsx

@@ -3,22 +3,23 @@ import { RuntimeApplication } from '@meta-ui/core';
 import { ContainerPropertySchema } from '../traits/core/slot';
 import { Static } from '@sinclair/typebox';
 import {
-  ComponentWrapperType,
+  ComponentParamsFromApp,
   MetaUIModules,
   SlotComponentMap,
 } from 'src/types/RuntimeSchema';
 import { ImplWrapper } from './ImplWrapper';
 
 export function resolveAppComponents(
-  mModules: MetaUIModules,
-  components: RuntimeApplication['spec']['components'],
-  app?: RuntimeApplication,
-  componentWrapper?: ComponentWrapperType,
-  onLayoutChange?: (id: string, layout: any) => void
+  params: {
+    components: RuntimeApplication['spec']['components'];
+    mModules: MetaUIModules;
+    app?: RuntimeApplication;
+  } & ComponentParamsFromApp
 ): {
   topLevelComponents: RuntimeApplication['spec']['components'];
   slotComponentsMap: SlotComponentMap;
 } {
+  const { components } = params;
   const topLevelComponents: RuntimeApplication['spec']['components'] = [];
   const slotComponentsMap: SlotComponentMap = new Map();
 
@@ -42,10 +43,7 @@ export function resolveAppComponents(
           component={c}
           slotsMap={slotComponentsMap.get(c.id)}
           targetSlot={{ id, slot }}
-          mModules={mModules}
-          app={app}
-          componentWrapper={componentWrapper}
-          onLayoutChange={onLayoutChange}
+          {...params}
           {...props}
           ref={ref}
         />

packages/runtime/src/types/RuntimeSchema.ts

@@ -1,3 +1,4 @@
+import RGL from 'react-grid-layout';
 import { ApiService } from 'src/modules/apiService';
 import { GlobalHandlerMap } from 'src/modules/handler';
 import { Registry } from 'src/modules/registry';
@@ -15,8 +16,13 @@ export type MetaUIModules = {
 
 export type ComponentWrapperType = React.FC<{ id: string }>;
 
+export type GridCallbacks = {
+  onLayoutChange?: (id: string, layout: RGL.Layout[]) => void;
+  onDrop?: (id: string, layout: RGL.Layout[], item?: RGL.Layout) => void;
+};
+
 export type ComponentParamsFromApp = {
-  onLayoutChange?: (id: string, layout: any) => void;
+  gridCallbacks?: GridCallbacks;
   componentWrapper?: ComponentWrapperType;
 };
 
@@ -56,7 +62,7 @@ type RuntimeFunctions = {
   subscribeMethods: SubscribeMethods;
 };
 
-export type ComponentMergedProps = ImplWrapperProps &
+export type ComponentImplementationProps = ImplWrapperProps &
   TraitResult['props'] &
   RuntimeFunctions;