@1771technologies/lytenyte-pro 1.0.0-beta.36 → 1.0.0-beta.38

package/dist/grid-box/item.js

@@ -2,79 +2,62 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Item } from "../listbox/item";
 import { dragState, DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
-import { useCombinedRefs, useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
 import { useGridBoxContext } from "./context";
-export const BoxItem = forwardRef(function BoxItem(
-  { item, itemAs, itemClassName, itemStyle, children, ...props },
-  forwarded,
-) {
-  const { accepted } = useGridBoxContext();
-  const { dragProps } = useDraggable({
-    getItems: () => {
-      return {
-        siteLocalData: item.dragData,
-      };
-    },
-    placeholder: item.dragPlaceholder,
-  });
-  const ref = useCombinedRefs(forwarded, dragProps.ref);
-  const extraProps = item.draggable ? { ...dragProps, ref } : { ref: forwarded };
-  const renderer = useSlot({
-    props: [
-      {
-        children: _jsx(Item, {
-          ...extraProps,
-          onKeyDown: (ev) => {
-            if (ev.key === " ") {
-              item.onAction?.(ev.currentTarget);
-              ev.preventDefault();
+export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName, itemStyle, children, ...props }, forwarded) {
+    const { accepted } = useGridBoxContext();
+    const { dragProps } = useDraggable({
+        getItems: () => {
+            return {
+                siteLocalData: item.dragData,
+            };
+        },
+        placeholder: item.dragPlaceholder,
+    });
+    const ref = useCombinedRefs(forwarded, dragProps.ref);
+    const extraProps = item.draggable ? { ...dragProps, ref } : { ref: forwarded };
+    const renderer = useSlot({
+        props: [
+            {
+                children: (_jsx(Item, { ...extraProps, onKeyDown: (ev) => {
+                        if (ev.key === " ") {
+                            item.onAction?.(ev.currentTarget);
+                            ev.preventDefault();
+                        }
+                        if (ev.key === "Backspace" || ev.key === "Delete")
+                            item.onDelete?.(ev.currentTarget);
+                    }, onClick: (ev) => item.onAction(ev.currentTarget), className: itemClassName, style: itemStyle, "data-ln-source": item.source, "data-ln-index": item.index, children: children })),
+            },
+        ],
+        slot: itemAs ?? _jsx("div", {}),
+    });
+    return (_jsx(DropWrap, { ...props, onEnter: (e) => {
+            const data = dragState.active.get();
+            const thisSource = e.getAttribute("data-ln-source");
+            const dragSource = data?.getAttribute("data-ln-source");
+            if (!data)
+                return;
+            if (thisSource !== dragSource) {
+                e.setAttribute("data-ln-is-after", "true");
+                return;
             }
-            if (ev.key === "Backspace" || ev.key === "Delete") item.onDelete?.(ev.currentTarget);
-          },
-          onClick: (ev) => item.onAction(ev.currentTarget),
-          className: itemClassName,
-          style: itemStyle,
-          "data-ln-source": item.source,
-          "data-ln-index": item.index,
-          children: children,
-        }),
-      },
-    ],
-    slot: itemAs ?? _jsx("div", {}),
-  });
-  return _jsx(DropWrap, {
-    ...props,
-    onEnter: (e) => {
-      const data = dragState.active.get();
-      const thisSource = e.getAttribute("data-ln-source");
-      const dragSource = data?.getAttribute("data-ln-source");
-      if (!data) return;
-      if (thisSource !== dragSource) {
-        e.setAttribute("data-ln-is-after", "true");
-        return;
-      }
-      const overIndex = Number.parseInt(e.getAttribute("data-ln-index"));
-      const dragIndex = Number.parseInt(data.getAttribute("data-ln-index"));
-      if (Number.isNaN(dragIndex) || Number.isNaN(overIndex) || overIndex === dragIndex) return;
-      if (overIndex < dragIndex) {
-        e.setAttribute("data-ln-is-before", "true");
-      } else {
-        e.setAttribute("data-ln-is-after", "true");
-      }
-    },
-    onLeave: (el) => {
-      el.removeAttribute("data-ln-is-before");
-      el.removeAttribute("data-ln-is-after");
-    },
-    "data-ln-source": item.source,
-    "data-ln-index": item.index,
-    accepted: accepted,
-    onDrop: (e) => {
-      const el = e.dropElement;
-      el.removeAttribute("data-ln-is-before");
-      el.removeAttribute("data-ln-is-after");
-      item.onDrop(e);
-    },
-    as: renderer,
-  });
+            const overIndex = Number.parseInt(e.getAttribute("data-ln-index"));
+            const dragIndex = Number.parseInt(data.getAttribute("data-ln-index"));
+            if (Number.isNaN(dragIndex) || Number.isNaN(overIndex) || overIndex === dragIndex)
+                return;
+            if (overIndex < dragIndex) {
+                e.setAttribute("data-ln-is-before", "true");
+            }
+            else {
+                e.setAttribute("data-ln-is-after", "true");
+            }
+        }, onLeave: (el) => {
+            el.removeAttribute("data-ln-is-before");
+            el.removeAttribute("data-ln-is-after");
+        }, "data-ln-source": item.source, "data-ln-index": item.index, accepted: accepted, onDrop: (e) => {
+            const el = e.dropElement;
+            el.removeAttribute("data-ln-is-before");
+            el.removeAttribute("data-ln-is-after");
+            item.onDrop(e);
+        }, as: renderer }));
 });

package/dist/grid-box/panel.d.ts

@@ -1,13 +1 @@
-export declare const GridBoxPanel: import("react").ForwardRefExoticComponent<
-  Omit<
-    Omit<
-      import("react").DetailedHTMLProps<
-        import("react").HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-      >,
-      "onDrop"
-    >,
-    "ref"
-  > &
-    import("react").RefAttributes<HTMLDivElement>
->;
+export declare const GridBoxPanel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrop">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/grid-box/panel.js

@@ -4,13 +4,6 @@ import { Panel } from "../listbox/panel";
 import { DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGridBoxContext } from "./context";
 export const GridBoxPanel = forwardRef(function GridBoxPanel(props, forwarded) {
-  const ctx = useGridBoxContext();
-  return _jsx(DropWrap, {
-    ...props,
-    accepted: ctx.accepted,
-    "data-ln-orientation": ctx.orientation,
-    onDrop: ctx.onRootDrop,
-    ref: forwarded,
-    as: _jsx(Panel, {}),
-  });
+    const ctx = useGridBoxContext();
+    return (_jsx(DropWrap, { ...props, accepted: ctx.accepted, "data-ln-orientation": ctx.orientation, onDrop: ctx.onRootDrop, ref: forwarded, as: _jsx(Panel, {}) }));
 });

package/dist/grid-box/root.d.ts

@@ -1,15 +1,9 @@
 import { type PropsWithChildren } from "react";
 import type { DropEventParams, Grid } from "../+types";
 export interface GridBoxRootProps<T> {
-  readonly orientation?: "vertical" | "horizontal";
-  readonly onRootDrop: (p: DropEventParams) => void;
-  readonly accepted: string[];
-  readonly grid: Grid<T>;
+    readonly orientation?: "vertical" | "horizontal";
+    readonly onRootDrop: (p: DropEventParams) => void;
+    readonly accepted: string[];
+    readonly grid: Grid<T>;
 }
-export declare function GridBoxRoot<T>({
-  grid,
-  orientation,
-  accepted,
-  onRootDrop,
-  children,
-}: PropsWithChildren<GridBoxRootProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function GridBoxRoot<T>({ grid, orientation, accepted, onRootDrop, children, }: PropsWithChildren<GridBoxRootProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/grid-box/root.js

@@ -3,15 +3,6 @@ import { useMemo } from "react";
 import { Root } from "../listbox/root";
 import { GridProvider } from "../grid-provider/provider";
 import { GridBoxContext } from "./context";
-export function GridBoxRoot({ grid, orientation = "vertical", accepted, onRootDrop, children }) {
-  return _jsx(GridProvider, {
-    value: grid,
-    children: _jsx(GridBoxContext.Provider, {
-      value: useMemo(
-        () => ({ accepted, orientation, onRootDrop }),
-        [accepted, onRootDrop, orientation],
-      ),
-      children: _jsx(Root, { orientation: orientation, children: children }),
-    }),
-  });
+export function GridBoxRoot({ grid, orientation = "vertical", accepted, onRootDrop, children, }) {
+    return (_jsx(GridProvider, { value: grid, children: _jsx(GridBoxContext.Provider, { value: useMemo(() => ({ accepted, orientation, onRootDrop }), [accepted, onRootDrop, orientation]), children: _jsx(Root, { orientation: orientation, children: children }) }) }));
 }

package/dist/grid-box/use-aggregation-box-items.d.ts

@@ -1,21 +1,18 @@
 import type { AggModelFn, DropEventParams, Grid } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface UseAggregationBoxItemsProps<T> {
-  readonly grid: Grid<T>;
-  readonly orientation?: "horizontal" | "vertical";
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
 }
-export declare function useAggregationBoxItems<T>({
-  grid,
-  orientation,
-}: UseAggregationBoxItemsProps<T>): {
-  rootProps: {
-    accepted: string[];
-    onRootDrop: (p: DropEventParams) => void;
-    orientation: "horizontal" | "vertical" | undefined;
-    grid: Grid<T>;
-  };
-  items: GridBoxItem<{
-    id: string;
-    agg: AggModelFn<T>;
-  }>[];
+export declare function useAggregationBoxItems<T>({ grid, orientation }: UseAggregationBoxItemsProps<T>): {
+    rootProps: {
+        accepted: string[];
+        onRootDrop: (p: DropEventParams) => void;
+        orientation: "horizontal" | "vertical" | undefined;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<{
+        id: string;
+        agg: AggModelFn<T>;
+    }>[];
 };

package/dist/grid-box/use-aggregation-box-items.js

@@ -1,61 +1,62 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
 export function useAggregationBoxItems({ grid, orientation }) {
-  const model = grid.state.aggModel.useValue();
-  const gridId = grid.state.gridId.useValue();
-  const items = useMemo(() => {
-    const items = Object.entries(model).map(([id, agg], i) => {
-      const column = grid.api.columnById(id);
-      const name = column?.name ?? column?.id ?? id;
-      const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
-      return {
-        draggable: false,
-        id,
-        index: i,
-        source: "aggregation",
-        data: { id, agg },
-        dragData: {},
-        label: `${name} ${fn}`,
-        onAction: () => {},
-        onDelete: () => {
-          grid.state.aggModel.set((prev) => {
-            const next = { ...prev };
-            delete next[id];
-            return next;
-          });
-        },
-        onDrop: () => {},
-        dragPlaceholder: undefined,
-      };
+    const model = grid.state.aggModel.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const items = Object.entries(model).map(([id, agg], i) => {
+            const column = grid.api.columnById(id);
+            const name = column?.name ?? column?.id ?? id;
+            const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
+            return {
+                draggable: false,
+                id,
+                index: i,
+                source: "aggregation",
+                data: { id, agg },
+                dragData: {},
+                label: `${name} ${fn}`,
+                onAction: () => { },
+                onDelete: () => {
+                    grid.state.aggModel.set((prev) => {
+                        const next = { ...prev };
+                        delete next[id];
+                        return next;
+                    });
+                },
+                onDrop: () => { },
+                dragPlaceholder: undefined,
+            };
+        });
+        return items;
+    }, [model, grid.api, grid.state.aggModel]);
+    const onRootDrop = useEvent((p) => {
+        const aggId = `${gridId}-agg`;
+        const c = p.state.siteLocalData?.[aggId];
+        if (!c)
+            return;
+        const current = model[c.id];
+        if (!current) {
+            const base = grid.state.columnBase.get();
+            const agg = c.uiHints?.aggDefault ??
+                c.uiHints?.aggsAllowed?.[0] ??
+                base.uiHints?.aggDefault ??
+                base.uiHints?.aggsAllowed?.[0];
+            if (!agg)
+                return;
+            const next = { fn: agg };
+            grid.state.aggModel.set((prev) => ({ ...prev, [c.id]: next }));
+        }
     });
-    return items;
-  }, [model, grid.api, grid.state.aggModel]);
-  const onRootDrop = useEvent((p) => {
-    const aggId = `${gridId}-agg`;
-    const c = p.state.siteLocalData?.[aggId];
-    if (!c) return;
-    const current = model[c.id];
-    if (!current) {
-      const base = grid.state.columnBase.get();
-      const agg =
-        c.uiHints?.aggDefault ??
-        c.uiHints?.aggsAllowed?.[0] ??
-        base.uiHints?.aggDefault ??
-        base.uiHints?.aggsAllowed?.[0];
-      if (!agg) return;
-      const next = { fn: agg };
-      grid.state.aggModel.set((prev) => ({ ...prev, [c.id]: next }));
-    }
-  });
-  return useMemo(() => {
-    return {
-      rootProps: {
-        accepted: [`${gridId}-agg`],
-        onRootDrop,
-        orientation,
-        grid,
-      },
-      items,
-    };
-  }, [grid, gridId, items, onRootDrop, orientation]);
+    return useMemo(() => {
+        return {
+            rootProps: {
+                accepted: [`${gridId}-agg`],
+                onRootDrop,
+                orientation,
+                grid,
+            },
+            items,
+        };
+    }, [grid, gridId, items, onRootDrop, orientation]);
 }

package/dist/grid-box/use-column-box-items.d.ts

@@ -2,44 +2,34 @@ import { type ReactNode } from "react";
 import type { Column, DropEventParams, Grid } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface OnDropParams<T> {
-  readonly target: Column<T>;
-  readonly src: Column<T>;
-  readonly isBefore: boolean;
+    readonly target: Column<T>;
+    readonly src: Column<T>;
+    readonly isBefore: boolean;
 }
 export interface OnRootDropParams<T> {
-  readonly column: Column<T>;
+    readonly column: Column<T>;
 }
 export interface OnActionParams<T> {
-  readonly column: Column<T>;
-  readonly el: HTMLElement;
+    readonly column: Column<T>;
+    readonly el: HTMLElement;
 }
 export interface UseColumnBoxItemArgs<T> {
-  readonly grid: Grid<T>;
-  readonly orientation?: "horizontal" | "vertical";
-  readonly draggable?: boolean;
-  readonly itemFilter?: (c: Column<T>) => boolean;
-  readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
-  readonly onDrop?: (p: OnDropParams<T>) => void;
-  readonly onAction?: (c: OnActionParams<T>) => void;
-  readonly onDelete?: (c: OnActionParams<T>) => void;
-  readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly draggable?: boolean;
+    readonly itemFilter?: (c: Column<T>) => boolean;
+    readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
+    readonly onDrop?: (p: OnDropParams<T>) => void;
+    readonly onAction?: (c: OnActionParams<T>) => void;
+    readonly onDelete?: (c: OnActionParams<T>) => void;
+    readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
 }
-export declare function useColumnBoxItems<T>({
-  grid,
-  onRootDrop,
-  onDrop,
-  onDelete,
-  onAction,
-  orientation,
-  draggable,
-  dragPlaceholder,
-  itemFilter,
-}: UseColumnBoxItemArgs<T>): {
-  rootProps: {
-    accepted: string[];
-    orientation: "horizontal" | "vertical" | undefined;
-    onRootDrop: (p: DropEventParams) => void;
-    grid: Grid<T>;
-  };
-  items: GridBoxItem<Column<T>>[];
+export declare function useColumnBoxItems<T>({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable, dragPlaceholder, itemFilter, }: UseColumnBoxItemArgs<T>): {
+    rootProps: {
+        accepted: string[];
+        orientation: "horizontal" | "vertical" | undefined;
+        onRootDrop: (p: DropEventParams) => void;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<Column<T>>[];
 };

package/dist/grid-box/use-column-box-items.js

@@ -1,90 +1,78 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useColumnBoxItems({
-  grid,
-  onRootDrop,
-  onDrop,
-  onDelete,
-  onAction,
-  orientation,
-  draggable = true,
-  dragPlaceholder,
-  itemFilter,
-}) {
-  const columns = grid.state.columns.useValue();
-  const base = grid.state.columnBase.useValue();
-  const gridId = grid.state.gridId.useValue();
-  const items = useMemo(() => {
-    const groupId = `${gridId}-group`;
-    const aggId = `${gridId}-agg`;
-    const columnId = `${gridId}-column`;
-    return columns
-      .filter((c) => {
-        return itemFilter ? itemFilter(c) : true;
-      })
-      .map((c, i) => {
-        const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
-        const canAgg = Boolean(
-          c.uiHints?.aggDefault ??
-            c.uiHints?.aggDefault?.length ??
-            base.uiHints?.aggDefault ??
-            base.uiHints?.aggsAllowed?.length,
-        );
-        const data = {
-          [columnId]: c,
-        };
-        if (canGroup) data[groupId] = c.id;
-        if (canAgg) data[aggId] = c;
-        return {
-          label: c.name ?? c.id,
-          id: c.id,
-          index: i,
-          source: "columns",
-          draggable,
-          data: c,
-          dragData: data,
-          dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
-          onAction: (el) => onAction?.({ column: c, el }),
-          onDelete: (el) => onDelete?.({ column: c, el }),
-          onDrop: (p) => {
-            const src = p.state.siteLocalData?.[columnId];
-            const target = c;
-            const dragIndex = columns.findIndex((x) => x.id === src.id);
-            const overIndex = columns.findIndex((x) => x.id === c.id);
-            const isBefore = overIndex < dragIndex;
-            if (overIndex === dragIndex) return;
-            onDrop?.({ src, target, isBefore });
-          },
-        };
-      });
-  }, [
-    base.uiHints?.aggDefault,
-    base.uiHints?.aggsAllowed?.length,
-    base.uiHints?.rowGroupable,
-    columns,
-    dragPlaceholder,
-    draggable,
-    gridId,
-    itemFilter,
-    onAction,
-    onDelete,
-    onDrop,
-  ]);
-  const onRootDropEv = useEvent((p) => {
-    const columnId = `${gridId}-column`;
-    const src = p.state.siteLocalData?.[columnId];
-    onRootDrop?.(src);
-  });
-  return useMemo(
-    () => ({
-      rootProps: {
-        accepted: [`${gridId}-column`],
-        orientation: orientation,
-        onRootDrop: onRootDropEv,
-        grid,
-      },
-      items,
-    }),
-    [grid, gridId, items, onRootDropEv, orientation],
-  );
+export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable = true, dragPlaceholder, itemFilter, }) {
+    const columns = grid.state.columns.useValue();
+    const base = grid.state.columnBase.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const groupId = `${gridId}-group`;
+        const aggId = `${gridId}-agg`;
+        const columnId = `${gridId}-column`;
+        return columns
+            .filter((c) => {
+            return itemFilter ? itemFilter(c) : true;
+        })
+            .map((c, i) => {
+            const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
+            const canAgg = Boolean(c.uiHints?.aggDefault ??
+                c.uiHints?.aggDefault?.length ??
+                base.uiHints?.aggDefault ??
+                base.uiHints?.aggsAllowed?.length);
+            const data = {
+                [columnId]: c,
+            };
+            if (canGroup)
+                data[groupId] = c.id;
+            if (canAgg)
+                data[aggId] = c;
+            return {
+                label: c.name ?? c.id,
+                id: c.id,
+                index: i,
+                source: "columns",
+                draggable,
+                data: c,
+                dragData: data,
+                dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
+                onAction: (el) => onAction?.({ column: c, el }),
+                onDelete: (el) => onDelete?.({ column: c, el }),
+                onDrop: (p) => {
+                    const src = p.state.siteLocalData?.[columnId];
+                    const target = c;
+                    const dragIndex = columns.findIndex((x) => x.id === src.id);
+                    const overIndex = columns.findIndex((x) => x.id === c.id);
+                    const isBefore = overIndex < dragIndex;
+                    if (overIndex === dragIndex)
+                        return;
+                    onDrop?.({ src, target, isBefore });
+                },
+            };
+        });
+    }, [
+        base.uiHints?.aggDefault,
+        base.uiHints?.aggsAllowed?.length,
+        base.uiHints?.rowGroupable,
+        columns,
+        dragPlaceholder,
+        draggable,
+        gridId,
+        itemFilter,
+        onAction,
+        onDelete,
+        onDrop,
+    ]);
+    const onRootDropEv = useEvent((p) => {
+        const columnId = `${gridId}-column`;
+        const src = p.state.siteLocalData?.[columnId];
+        onRootDrop?.(src);
+    });
+    return useMemo(() => ({
+        rootProps: {
+            accepted: [`${gridId}-column`],
+            orientation: orientation,
+            onRootDrop: onRootDropEv,
+            grid,
+        },
+        items,
+    }), [grid, gridId, items, onRootDropEv, orientation]);
 }

package/dist/grid-box/use-row-group-box-items.d.ts

@@ -2,22 +2,17 @@ import { type ReactNode } from "react";
 import type { DropEventParams, Grid, RowGroupModelItem } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface UseRowGroupBoxItems<T> {
-  readonly grid: Grid<T>;
-  readonly orientation?: "horizontal" | "vertical";
-  readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
-  readonly hideColumnOnGroup?: boolean;
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
+    readonly hideColumnOnGroup?: boolean;
 }
-export declare function useRowGroupBoxItems<T>({
-  grid,
-  orientation,
-  dragPlaceholder,
-  hideColumnOnGroup,
-}: UseRowGroupBoxItems<T>): {
-  rootProps: {
-    accepted: string[];
-    onRootDrop: (p: DropEventParams) => void;
-    orientation: "horizontal" | "vertical" | undefined;
-    grid: Grid<T>;
-  };
-  items: GridBoxItem<RowGroupModelItem<T>>[];
+export declare function useRowGroupBoxItems<T>({ grid, orientation, dragPlaceholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
+    rootProps: {
+        accepted: string[];
+        onRootDrop: (p: DropEventParams) => void;
+        orientation: "horizontal" | "vertical" | undefined;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<RowGroupModelItem<T>>[];
 };